<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.1.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/green/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"liukairui.me","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.10.1","exturl":false,"sidebar":{"position":"left","display":"hide","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":true,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":false,"nav":null,"activeClass":"valine"},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="此版为JavaScript基础版，以实际应用为主,主讲:尚硅谷李立超,视频来自B站:BV1YW411T7GX">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础版笔记">
<meta property="og:url" content="http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/">
<meta property="og:site_name" content="LiuKairui Website">
<meta property="og:description" content="此版为JavaScript基础版，以实际应用为主,主讲:尚硅谷李立超,视频来自B站:BV1YW411T7GX">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-11-13T16:00:24.000Z">
<meta property="article:modified_time" content="2021-10-18T06:44:13.579Z">
<meta property="article:author" content="Liu Kairui">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="笔记">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/","path":"article/JavaScript基础版笔记/","title":"JavaScript基础版笔记"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>JavaScript基础版笔记 | LiuKairui Website</title>
  

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?ea07bceb8f5fa721da2ebf01833faa32"></script>



<div class="nindexBK">
<div class="nindexBKC"></div>
<div class="nindex">
  <h1>Hey👋</h1>
  <p style="font-weight: 500; font-size: 2.2em">欢迎访问Liu Kairui的个人站.</p>
  <p>
      我是一个来自重庆的在校大学生, 偏爱于前端技术<!--与OS设计-->, 偶尔使用 JS / Go 进行轻量项目开发, 欢迎访问我的
      <a href="https://github.com/KairuiLiu" target="_blank"><i class="fab fa-github-alt"></i> GitHub</a> .
  </p>
  <p>
      这个网站主要用来存储学习 / 瞎搞的笔记, 同时提供了邮件、图床等服务. 对于一些自认为有趣的<a href="javascript:;" id="myProj">项目</a>, 我也会将项目介绍, 文档, 甚至是设计指南发布在这里.
  </p>
  <ul>
    <li><p><a href="/artrank/" target="_blank">ArtRank</a>: 基于Node.JS的PageRank文献管理推荐系统</p></li>
    <li><p><a href="/gooj/" target="_blank">GoOJ</a>: 基于Golang的高校在线评测系统</p></li>
    <li><p><a href="/projects/" target="_blank">更多 <i class="fas fa-angle-right"></i></a></p></li>

  </ul>
  <p>
      可以在这些平台找到我: 
      <a href="https://www.zhihu.com/people/liu-kai-rui-18" target="_blank">知乎</a>,
      <a href="https://space.bilibili.com/33238144" target="_blank">bilibili</a>
      和
      <a href="https://www.coolapk.com/u/805314?from=qr" target="_blank">酷安</a>.
  </p>

  <p>
      下滑即可进入博客 <i class="fas fa-arrow-down"></i>
  </p>
</div>
</div>  

 
<script>
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "谢谢离开 | " + OriginTitile;
      clearTimeout(titleTime);
    } else {
      document.title = "欢迎归来 | " + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>


<script>
  function checkIndex(){
    let nindexItems = [[".nindexBK","display","block","none"],[".headband","display","none","block"],["div.toggle.sidebar-toggle","visibility","hidden","visible"]]; // ,["button.darkmode-toggle","visibility","hidden","visible"]];
    let isIndex = new RegExp("^(\/){0,1}(index){0,1}(\.html){0,1}(/)*$").test(location.pathname);
    let backCanvas = document.querySelector(".nindexBK");
    nindexItems.dispShift = function (stat){this.forEach((e) => {try{document.querySelector(e[0]).style[e[1]]=e[2+stat];}catch{}})}
    if(isIndex){
      nindexItems.dispShift(0);
      window.onscroll=function(){
        if(document.documentElement.scrollTop>backCanvas.offsetHeight*1.05){
          nindexItems.dispShift(1);window.onscroll=null;
        }
      }
      document.querySelector("#myProj").onclick=()=>{
        let projlist = document.querySelector(".nindex>ul");
        projlist.className.indexOf("ulactive")==-1?projlist.classList.add("ulactive"):projlist.classList.remove("ulactive")
      }
    }else nindexItems.dispShift(1);
  }
  checkIndex();
</script>

<!--<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>-->

  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<link rel="alternate" href="/atom.xml" title="LiuKairui Website" type="application/atom+xml">
<style>.darkmode--activated{--body-bg-color:#282828;--content-bg-color:#333;--card-bg-color:#555;--text-color:#ccc;--blockquote-color:#bbb;--link-color:#ccc;--link-hover-color:#eee;--brand-color:#ddd;--brand-hover-color:#ddd;--table-row-odd-bg-color:#282828;--table-row-hover-bg-color:#363636;--menu-item-bg-color:#555;--btn-default-bg:#222;--btn-default-color:#ccc;--btn-default-border-color:#555;--btn-default-hover-bg:#666;--btn-default-hover-color:#ccc;--btn-default-hover-border-color:#666;--highlight-background:#282b2e;--highlight-foreground:#a9b7c6;--highlight-gutter-background:#34393d;--highlight-gutter-foreground:#9ca9b6}.darkmode--activated img{opacity:.75}.darkmode--activated img:hover{opacity:.9}.darkmode--activated code{color:#69dbdc;background:0 0}button.darkmode-toggle{z-index:9999}.darkmode-ignore,img{display:flex!important}</style></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">LiuKairui Website</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">要有信仰</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fas fa-hashtag fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-收藏夹"><a href="/favorites/" rel="section"><i class="fab fa-gratipay fa-fw"></i>收藏夹</a></li>
        <li class="menu-item menu-item-留言板"><a href="/messageBoard/" rel="section"><i class="fab fa-facebook-messenger fa-fw"></i>留言板</a></li>
        <li class="menu-item menu-item-项目"><a href="/projects/" rel="section"><i class="fa fa-satellite fa-fw"></i>项目</a></li>
        <li class="menu-item menu-item-图床"><a href="http://img.liukairui.me/" rel="noopener" target="_blank"><i class="fa fa-bed fa-fw"></i>图床</a></li>
        <li class="menu-item menu-item-云ide"><a href="http://vsc.liukairui.me/" rel="noopener" target="_blank"><i class="fas fa-code fa-fw"></i>云IDE</a></li>
        <li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
        <li class="menu-item menu-item-邮箱"><a href="http://mail.liukairui.me/mail" rel="noopener" target="_blank"><i class="fas fa-envelope-open-text fa-fw"></i>邮箱</a></li>
        <li class="menu-item menu-item-rss"><a href="/atom.xml" rel="section"><i class="fa fa-rss fa-fw"></i>RSS</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A6%82%E8%BF%B0"><span class="nav-number">1.</span> <span class="nav-text">概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%A8%8B%E5%BA%8F"><span class="nav-number">2.</span> <span class="nav-text">第一个程序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js%E4%BB%A3%E7%A0%81%E7%BC%96%E5%86%99%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="nav-number">3.</span> <span class="nav-text">JS代码编写的位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95"><span class="nav-number">4.</span> <span class="nav-text">JS的基本用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%97%E9%9D%A2%E9%87%8F%E4%B8%8E%E5%8F%98%E9%87%8F"><span class="nav-number">5.</span> <span class="nav-text">字面量与变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A0%87%E8%AF%86%E7%AC%A6"><span class="nav-number">6.</span> <span class="nav-text">标识符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">7.</span> <span class="nav-text">数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">8.</span> <span class="nav-text">强制类型转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E8%BF%9B%E5%88%B6%E7%9A%84%E6%95%B0%E5%AD%97"><span class="nav-number">9.</span> <span class="nav-text">其他进制的数字:</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">10.</span> <span class="nav-text">算数运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">11.</span> <span class="nav-text">一元运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%A2%9E%E8%87%AA%E5%87%8F"><span class="nav-number">12.</span> <span class="nav-text">自增自减</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">13.</span> <span class="nav-text">逻辑运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">14.</span> <span class="nav-text">赋值运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">15.</span> <span class="nav-text">关系运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#unicode%E7%BC%96%E7%A0%81"><span class="nav-number">16.</span> <span class="nav-text">Unicode编码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9D%A1%E4%BB%B6%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">17.</span> <span class="nav-text">条件运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="nav-number">18.</span> <span class="nav-text">运算符的优先级</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E5%8F%A5"><span class="nav-number">19.</span> <span class="nav-text">语句</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">20.</span> <span class="nav-text">输入框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B5%8B%E5%80%BC%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="nav-number">21.</span> <span class="nav-text">赋值的返回值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E8%AE%A1%E6%97%B6%E5%99%A8"><span class="nav-number">22.</span> <span class="nav-text">设置计时器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E7%AE%80%E4%BB%8B"><span class="nav-number">23.</span> <span class="nav-text">对象简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F"><span class="nav-number">24.</span> <span class="nav-text">对象字面量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%BD%E6%95%B0"><span class="nav-number">25.</span> <span class="nav-text">函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0"><span class="nav-number">26.</span> <span class="nav-text">立即执行函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%9A%E4%B8%BE%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">27.</span> <span class="nav-text">枚举对象中的属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-number">28.</span> <span class="nav-text">全局作用域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A3%B0%E6%98%8E%E6%8F%90%E5%89%8D"><span class="nav-number">29.</span> <span class="nav-text">声明提前</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#debug"><span class="nav-number">30.</span> <span class="nav-text">debug</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#this"><span class="nav-number">31.</span> <span class="nav-text">this</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8factory%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="nav-number">32.</span> <span class="nav-text">使用factory创建对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">33.</span> <span class="nav-text">构造函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="nav-number">34.</span> <span class="nav-text">原型对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#tostring"><span class="nav-number">35.</span> <span class="nav-text">toString</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6gc"><span class="nav-number">36.</span> <span class="nav-text">垃圾回收(GC)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84"><span class="nav-number">37.</span> <span class="nav-text">数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="nav-number">38.</span> <span class="nav-text">使用字面量创建数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-number">39.</span> <span class="nav-text">数组的常用方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E9%81%8D%E5%8E%86"><span class="nav-number">40.</span> <span class="nav-text">数组的遍历</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%B6%E4%BB%96%E6%96%B9%E6%B3%95"><span class="nav-number">41.</span> <span class="nav-text">数组的其他方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">42.</span> <span class="nav-text">函数对象的方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8"><span class="nav-number">43.</span> <span class="nav-text">参数列表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#date%E5%AF%B9%E8%B1%A1"><span class="nav-number">44.</span> <span class="nav-text">date对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#math"><span class="nav-number">45.</span> <span class="nav-text">Math</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8C%85%E8%A3%85%E7%B1%BB"><span class="nav-number">46.</span> <span class="nav-text">包装类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#string"><span class="nav-number">47.</span> <span class="nav-text">String</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">48.</span> <span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dom"><span class="nav-number">49.</span> <span class="nav-text">DOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dom%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6"><span class="nav-number">50.</span> <span class="nav-text">DOM中的事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E5%AF%B9%E8%B1%A1"><span class="nav-number">51.</span> <span class="nav-text">获取元素节点对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E5%AD%90%E8%8A%82%E7%82%B9"><span class="nav-number">52.</span> <span class="nav-text">获取元素的子节点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E7%88%B6%E5%85%83%E7%B4%A0%E4%B8%8E%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9"><span class="nav-number">53.</span> <span class="nav-text">获取父元素与兄弟节点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#a%E6%A0%87%E7%AD%BE%E7%82%B9%E5%87%BB%E7%82%B9%E5%87%BB%E7%9A%84%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA"><span class="nav-number">54.</span> <span class="nav-text">a标签点击点击的默认行为</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#table%E4%BD%BF%E7%94%A8%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="nav-number">55.</span> <span class="nav-text">table使用的注意事项</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js%E4%B8%AD%E7%B4%A2%E7%B4%A2%E5%BC%95%E5%8F%98%E5%8C%96%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">56.</span> <span class="nav-text">js中索索引变化的问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F"><span class="nav-number">57.</span> <span class="nav-text">操作内联样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E5%85%B6%E4%BB%96%E6%A0%B7%E5%BC%8F"><span class="nav-number">58.</span> <span class="nav-text">获取元素的其他样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E4%BD%99%E7%9A%84%E6%A0%B7%E5%BC%8F%E6%96%B9%E6%B3%95"><span class="nav-number">59.</span> <span class="nav-text">其余的样式方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-number">60.</span> <span class="nav-text">事件对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%86%92%E6%B3%A1"><span class="nav-number">61.</span> <span class="nav-text">事件的冒泡</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A7%94%E6%B4%BE"><span class="nav-number">62.</span> <span class="nav-text">事件的委派</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="nav-number">63.</span> <span class="nav-text">事件的绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BC%A0%E6%92%AD"><span class="nav-number">64.</span> <span class="nav-text">事件的传播</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A8%E9%80%89%E9%97%AE%E9%A2%98"><span class="nav-number">65.</span> <span class="nav-text">全选问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8B%96%E5%8A%A8"><span class="nav-number">66.</span> <span class="nav-text">拖动</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%BB%9A%E8%BD%AE%E4%BA%8B%E4%BB%B6"><span class="nav-number">67.</span> <span class="nav-text">滚轮事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="nav-number">68.</span> <span class="nav-text">键盘事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bom"><span class="nav-number">69.</span> <span class="nav-text">BOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#navigator"><span class="nav-number">70.</span> <span class="nav-text">Navigator</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#history"><span class="nav-number">71.</span> <span class="nav-text">history</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#loacation"><span class="nav-number">72.</span> <span class="nav-text">loacation</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#window"><span class="nav-number">73.</span> <span class="nav-text">window</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%B1%BB%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="nav-number">74.</span> <span class="nav-text">类的操作</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Liu Kairui"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">Liu Kairui</p>
  <div class="site-description" itemprop="description">LiuKairui Persional Website</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">45</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/KairuiLiu" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;KairuiLiu" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:tclkr@live.com" title="E-Mail → mailto:tclkr@live.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=oaf3ToOlN17hr5sHV98bT8qxsNYGaw5L&noverify=0" title="QQ → https:&#x2F;&#x2F;qm.qq.com&#x2F;cgi-bin&#x2F;qm&#x2F;qr?k&#x3D;oaf3ToOlN17hr5sHV98bT8qxsNYGaw5L&amp;noverify&#x3D;0" rel="noopener" target="_blank"><i class="fab fa-qq fa-fw"></i>QQ</a>
      </span>
      <span class="links-of-author-item">
        <a href="/atom.xml" title="RSS → &#x2F;atom.xml"><i class="fa fa-rss fa-fw"></i>RSS</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://liukairui.blog.csdn.net/" title="CSDN → https:&#x2F;&#x2F;liukairui.blog.csdn.net" rel="noopener" target="_blank"><i class="fab fa-cuttlefish fa-fw"></i>CSDN</a>
      </span>
      <span class="links-of-author-item">
        <a href="http://liukairui.cc/" title="国内站点 → http:&#x2F;&#x2F;liukairui.cc" rel="noopener" target="_blank"><i class="fa fa-globe fa-fw"></i>国内站点</a>
      </span>
  </div>
  <div class="cc-license site-overview-item animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll site-overview-item animated">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://paste.ubuntu.com/" title="https:&#x2F;&#x2F;paste.ubuntu.com&#x2F;" rel="noopener" target="_blank">Ubuntu Pastebin</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://send.firefox.com/" title="https:&#x2F;&#x2F;send.firefox.com&#x2F;" rel="noopener" target="_blank">Firefox Send</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://jkwzs.cn/" title="https:&#x2F;&#x2F;jkwzs.cn&#x2F;" rel="noopener" target="_blank">南花醉笔丶の个人博客</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://ywrby.cn/" title="https:&#x2F;&#x2F;ywrby.cn&#x2F;" rel="noopener" target="_blank">Ywrby个人博客</a>
        </li>
    </ul>
  </div>

        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="Liu Kairui">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="LiuKairui Website">
      <meta itemprop="description" content="LiuKairui Persional Website">
    </span>
    
    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="JavaScript基础版笔记 | LiuKairui Website">
      <meta itemprop="description" content="此版为JavaScript基础版，以实际应用为主,主讲:尚硅谷李立超,视频来自B站:BV1YW411T7GX">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript基础版笔记
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-11-14 00:00:24" itemprop="dateCreated datePublished" datetime="2020-11-14T00:00:24+08:00">2020-11-14</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/JS/" itemprop="url" rel="index"><span itemprop="name">JS</span></a>
        </span>
    </span>

  
    <span id="/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/" class="post-meta-item leancloud_visitors" data-flag-title="JavaScript基础版笔记" title="阅读次数">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span class="leancloud-visitors-count"></span>
    </span>
  
  <span class="post-meta-item">
    
    <span class="post-meta-item-icon">
      <i class="far fa-comment"></i>
    </span>
    <span class="post-meta-item-text">Valine：</span>
  
    <a title="valine" href="/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

<script>
    CONFIG.hostname = location.hostname;
</script>
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>35k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>32 分钟</span>
    </span>
</div>

            <div class="post-description">此版为JavaScript基础版，以实际应用为主,主讲:尚硅谷李立超,视频来自B站:BV1YW411T7GX</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="概述">概述</h2>
<ol type="1">
<li><p>ECMAScript与Javascript ECMAScript是JavaScript的标准</p>
<p>一个JS包含三个元素:<code>ECMAScript</code>,<code>DOM</code>(文档对象模型:
如何通过JS操作网页),<code>BOM</code>(浏览器对象模型:
如何通过JS操作浏览器)</p></li>
<li><p>JS是一种解释形语言</p></li>
<li><p>JS是一种动态语言(和Py一样的一个变量多类型)</p></li>
<li><p>JS是OOP语言</p></li>
</ol>
<h2 id="第一个程序">第一个程序</h2>
<ul>
<li>JS代码要写在HTML的<code>script</code>标签中,<code>type=text/javascript</code>(不写也可以，默认就是)</li>
<li>代码以分号结尾</li>
</ul>
<ol type="1">
<li><p>在浏览器中弹出一个警告框：</p>
<p><code>alert("XXX")</code>弹出一个通知框，显示XXX内容，只有一个确定</p></li>
<li><p>在页面上输出内容</p>
<p><code>document.write("XXX");</code>直接在网页中显示双引号的HTML代码，例如:<code>write("1&lt;/br&gt;2&lt;/br&gt;3")</code>，值得注意的是显示的文字并不会出现在网页原代码的body部分</p></li>
<li><p>向控制台输出某句话</p>
<p><code>console.log("XXX")</code>向控制台输出一个内容</p></li>
</ol>
<h2 id="js代码编写的位置">JS代码编写的位置</h2>
<ol type="1">
<li><p>可以将JS代码编写到标签的<code>onclick</code>属性中，当我们点击代码的时候JS代码就会执行，例如如下代码会在点击的时候显示"嘿嘿"
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'嘿嘿'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>点我一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span></code></pre>
<strong>值得注意的是，与py一样，命令外面用<code>""</code>围起来了，所以围里面要用<code>''</code></strong></p></li>
<li><p>JS代码可以写在超链接的<code>href</code>属性中，但是这个时候就有格式要求了,要先谢<code>javascript:</code>,效果和之前一样
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:alert(<span class="token punctuation">'</span>嘿嘿<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点我一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre></p></li>
</ol>
<p><strong>与CSS一样，这种直接写在标签里面的形式不怎么用</strong></p>
<ol start="3" type="1">
<li>和CSS一样JS可以写在<code>script</code>里面，也可以写在外部文件里面,
外部引用的时候写法是 <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./xxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></li>
</ol>
<p><strong>注意JS代码是按照自上向下的顺序执行的</strong></p>
<h2 id="js的基本用法">JS的基本用法</h2>
<ol type="1">
<li>JS的注释,单行<code>//</code>,多航<code>/**/</code>，值得注意的是和less不同，两者都会被显示到源代码中</li>
<li>HTML不区分大小写但是JS严格区分大小写</li>
<li>JS中每一条语句以分号结尾(如果不写，浏览器会自动加，但是消耗内存，且存在分号加错的情况)</li>
<li>JS中忽略多的空格与换行，可以利用这个特性进行代码格式化</li>
</ol>
<h2 id="字面量与变量">字面量与变量</h2>
<ul>
<li>字面量:
可以认为字面量是常量，是一些不可改变的值，例如<code>1,2,3,4</code>这些都是不可变的，字面量都是可以直接使用的，但是一般都不会直接使用字面量</li>
<li>变量可以用来保存字面量，并且变量是可以变化的，用起来更加的简单，所以在开发的时候很少使用字面量</li>
</ul>
<p><strong>感觉很类似于C中的左值与右值</strong></p>
<ul>
<li>在JS中使用<code>var</code>关键字来声明一个变量,
但是刚声明的变量不能直接使用，例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> a<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
会输出<code>undefined</code>,
还和没有声明不同，没声明会报错<code>Uncaught ReferenceError: XXX is not defined at</code></li>
</ul>
<p>声明变量是没有值的，可以用<code>=</code>为变量赋值</p>
<p>当然声明赋值接受同时进行</p>
<p>可以通过变量对字面值进行描述</p>
<h2 id="标识符">标识符</h2>
<p>在JS中所有可以自主命名的全部可以叫做标识符，例如:
变量名/函数名/属性名都属于标识符</p>
<ol type="1">
<li>命名一个标识符的时候我们可以写 字母 数字 下划线 $</li>
<li>不能以数字开头</li>
<li>标识符不能是JS中的关键字的保留字，例如<code>var</code></li>
<li>标识符建议采用驼峰命名法(首字母小写，其余单词开头大写),
当然可以不接受建议</li>
</ol>
<p>JS在保存标识符的时候采用的是Unicode编码，所以理论上Unicode编码都可以使用，理论上中文可以</p>
<p><strong>和C语言一模一样</strong></p>
<h2 id="数据类型">数据类型</h2>
<p>数据类型指的是字面量的类型，在JS中一共有6种</p>
<ul>
<li>String</li>
<li>Number</li>
<li>Boolean</li>
<li>Null(空值)</li>
<li>Undefined(未定义)</li>
<li>Object(对象)</li>
</ul>
<p>p.s. 动态语言的好处，把很多类型直接整合到一起</p>
<p>其中基本数据类型就是除了Object之外的，Object属于引用数据类型</p>
<p>可以使用运算符号<code>typeof()</code>检查变量,例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">123</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b<span class="token operator">=</span><span class="token string">"123"</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
结果为 <pre class="language-none"><code class="language-none">123
123
number
string</code></pre></p>
<ul>
<li><p>String字符串:</p>
<ul>
<li><p>JS中字符串需要用引号(单引号或双引号均可)引起来</p></li>
<li><p>注意单引号里面用双引号，双引号里面用单引号</p></li>
<li><p>如果你就是不想用单引号，那么就要告诉浏览器你这里的双引号是用来干啥的，是框字符串的还是一个普通的双引号，这里我们可以使用<code>\</code>作为转意字符，例如<code>\"</code>,例如<code>var str2="我说：\"今天天\'气真不\'错\"";</code>，转意字符还有<code>\n</code>:
换行，<code>\t</code>: 制表符,<code>\\</code>表示<code>\</code>...</p>
<p><strong>和C语言完全一样</strong></p></li>
</ul></li>
<li><p>Number数值:</p>
<ul>
<li>在JS中所有类型的数字全是Number不区分<code>float</code>,<code>int</code></li>
<li>Number的最大值: 可以输出<code>Number.MAX_VALUE</code> 为:
1.7976931348623157e+308,
如果我们要求输出<code>Number.MAX_VALUE * Number.MAX_VALUE</code>结果会显示<code>Infinity</code></li>
<li>注意<code>Infinity</code>是一个字面量，允许被赋值，值得注意的是一定不能加引号，否则就是字符串了，并且注<code>Infinity</code>的typeof是<code>Number</code>,
存在<code>-Infinity</code></li>
<li>两个字符串相乘的结果是<code>NaN</code>
表示<code>Not a Number</code>,
与<code>Infinity</code>同理，字面量可以赋值，typeof是<code>Number</code>,不要引号!!</li>
<li>Number可以表示的最小精度<code>Number.MAX_VALUE</code>,也就是最小正值</li>
<li>JS的浮点数运算可能不精确，所以千万不要用JS进行高精运算，这些给服务器去算</li>
</ul></li>
<li><p>Boolean布尔值：</p>
<p><strong>与C++完全一样</strong></p></li>
<li><p>Null空值：</p>
<ul>
<li>只有一个数据元素就是null</li>
<li>专门用来表示空对象</li>
<li>值得注意的是<strong>用<code>typeof</code>看null,视频上说会显示<code>Object</code>但是本机上是<code>null</code>,null绝对不是一个对象，null有自己的类型，它是一个特殊的类型，至于为什么会null返回object，这是官方承认的错误</strong></li>
</ul></li>
<li><p>undefined未定义：</p>
<ul>
<li>声明变量不给他赋值就输出会显示这个</li>
<li>不声明就输出会报错</li>
<li><code>typeof()</code>是<code>undefined</code></li>
</ul></li>
</ul>
<h2 id="强制类型转换">强制类型转换</h2>
<ul>
<li>指的是将一个数据类型转化为<code>String</code>,<code>Number</code>,<code>Boolean</code></li>
</ul>
<ol type="1">
<li>转化为String:
<ul>
<li>调用被被转化类型的<code>toString</code>方法:
(<code>XXX.toString()</code>),<strong>注意，他不会修改原变量，而是作为返回值返回</strong>，bool的toString是"true"/"false"但是存在问题，Null的toString会报错<code>Uncaught TypeError: Cannot read property 'toString' of null</code>,<code>undefined</code>同理，因为这两个类型没有<code>toString</code></li>
<li>调用String()函数: 将被转化的数据作为参数传入,
这个支持Null与Undefined,<strong>说白了就是C++的构造函数</strong></li>
</ul></li>
<li>转化为Number
<ul>
<li>Number函数:
同上，非数字的字符串转<code>Number</code>会<code>NaN</code>，空string串(允许包含任意空格)会转化为0,
bool=true转为1,false转化为0, null转为0, undefined转为0</li>
<li>专门对付字符串的方式：parseInt()与parseFloat(),可以将字符串中有效的对应内容解析，例如<code>parseInt("123r456")</code>会先解析<code>123</code>然后遇到<code>r</code>直接<code>break</code>!
, 对非string传入参数，会默认先String <strong>没有toNumber</strong></li>
</ul></li>
<li>转化为boolean
<ul>
<li><code>Boolean</code>函数 Number 非0true,0false， String
非空true空false， Null 为false， undefined为false, Object为true</li>
</ul></li>
</ol>
<h2 id="其他进制的数字">其他进制的数字:</h2>
<ul>
<li>表示16进制(需要以0x开头)： <code>var a=0x3f3f3f3f;</code>,
输出会自动转化为10进制</li>
<li>表示8进制(需要以0开头)： <code>var a=070;</code>,
输出会自动转化为10进制</li>
<li>表示2进制(需要以0b开头)： <code>var a=0b10;</code>,
输出会自动转化为10进制</li>
</ul>
<p><strong>注意<code>parseInt("070")</code>会被不同浏览器解析成10或8进制,只需改为<code>parseInt("070",8)</code>即可</strong></p>
<h2 id="算数运算符">算数运算符</h2>
<p>运算符也叫操作符，例如:<code>+</code>,<code>typeof()[返回值是string]</code></p>
<p>算数运算符:<code>+</code>,<code>-</code>,<code>*</code>,<code>/</code>,<code>%</code>：
- <code>+</code>:
对非Number进行运算的时候遵循上面的规律进行转化运算，NaN参与运算结果一定是NaN，<strong>特殊的，两个字符串<code>相加</code>(只有相加)的结果是两个字符串拼接，任何值与字符串相加数字会转化为字符串任何拼接,包括NaN</strong>，利用这个性质可以任意类型+空字符串得到字符串类型，隐式类型转化
<pre class="language-none"><code class="language-none">Infinity+&quot;hello&quot;
&quot;Infinityhello&quot;
NaN+&quot;hello&quot;
&quot;NaNhello&quot;</code></pre>
运算是<strong>自左向右</strong>的所以<code>"1"+2+3="123"</code>,<code>1+2+"3"="33"</code></p>
<ul>
<li><p><code>-</code>/<code>*</code>/<code>/</code>:对非Number进行运算的时候遵循上面的规律进行转化运算，NaN参与运算结果一定是NaN，<strong>特殊的，字符串相减的时候会转化为Number</strong>，利用这个性质可以做string隐式类型转化为Number</p></li>
<li><p><code>%</code>取模运算</p></li>
</ul>
<h2 id="一元运算符">一元运算符</h2>
<p>一元运算符:<code>+</code>,<code>-</code></p>
<ul>
<li><code>Number</code>:<code>+</code>不会产生影响，<code>-</code>会取反</li>
<li>非<code>Number</code>会先转化再运算,例如<code>-true=-1</code>,<code>-NaN=NaN</code></li>
<li>利用这个性质<code>+a</code>可以吧a转化为<code>Number</code>，例如<code>+"1"+2+3=6</code></li>
</ul>
<h2 id="自增自减">自增自减</h2>
<ul>
<li>自增可以使得变量在自身的基础上加1,<code>a++ &lt;=&gt; a=a+1</code>,<code>++a &lt;=&gt; a=a+1</code>,自带赋值，前后<code>++</code>与C语言相同</li>
<li>自减可以使得变量在自身的基础上减1,<code>a-- &lt;=&gt; a=a-1</code>,<code>--a &lt;=&gt; a=a-1</code>,自带赋值，前后<code>--</code>与C语言相同</li>
<li>唯一的区别是后++是先给值然后马上自增，没有C++所谓的分隔符，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> b<span class="token operator">=</span><span class="token number">10</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token operator">++</span> <span class="token operator">+</span> <span class="token operator">++</span>b <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 结果是 <pre class="language-none"><code class="language-none">10+12+12&#x3D;34</code></pre> 并且注意 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> b<span class="token operator">=</span><span class="token number">10</span><span class="token punctuation">;</span>
b<span class="token operator">=</span>b<span class="token operator">++</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 等价于
<pre class="language-none"><code class="language-none">var b&#x3D;10;
var c&#x3D;b++;
b&#x3D;c;
console.log(b);</code></pre> 同样的<code>--</code>同理</li>
</ul>
<h2 id="逻辑运算符">逻辑运算符</h2>
<p>三个:非<code>!</code>,与<code>&amp;&amp;</code>,或<code>||</code></p>
<ul>
<li><p><code>!</code>:对bool进行运算就是取反，对非bool会先转化为bool我们可以利用他将一种类型将其转化为bool,方法是<code>!!tmp</code>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> a<span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">!</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> b<span class="token operator">=</span><span class="token number">10</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">!</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 得到结果 <pre class="language-none"><code class="language-none">true
false
false
true</code></pre></p></li>
<li><p><code>&amp;&amp;</code>，<code>||</code>与C相同，也有短路，非bool进行运算需要先转换为bool进行运算，然后<strong>返回原值</strong></p>
<ul>
<li><code>&amp;&amp;</code>两个值都是<code>true</code>返回后边的</li>
<li><code>&amp;&amp;</code>有<code>false</code>，返回<code>第一个false对应的</code></li>
<li><code>||</code>有<code>true</code>返回<code>第一个true对应的</code></li>
<li>第一个是<code>false</code>返回第二个</li>
</ul></li>
</ul>
<p>说白了返回值就是在加入短路原则之后最后判断的那个元素</p>
<h2 id="赋值运算符">赋值运算符</h2>
<p><code>+=</code>,<code>-=</code>,<code>*=</code>,<code>/=</code>,<code>%=</code>与C完全相同</p>
<h2 id="关系运算符">关系运算符</h2>
<p>关系成立返回<code>true</code></p>
<p><code>&gt;</code>，<code>&gt;=</code>，<code>&lt;</code>，<code>&lt;=</code>，<code>==</code>,<code>!=</code></p>
<ul>
<li>除了<code>==</code>与<code>!=</code>符号:</li>
</ul>
<p>非数值的情况: 转化为Number, 任何值与<code>NaN</code>比较都是false</p>
<p>特殊的:
符号两侧都是字符串会分别比较字符的Unicode编码(和C++一样)，前面的一样短的小，
所以谨慎比较两个数字字符串</p>
<ul>
<li><p>对于<code>==</code>与<code>!=</code>符号：
类型不同会自动进行类型转化，但是左边转右边还是右边转左边都不一定，注意的是<code>undefined</code>==<code>null</code>,<code>任何值</code>==<code>NaN</code>都为false,
包括<code>NaN</code></p></li>
<li><p><code>===</code>,<code>!==</code>与<code>==</code>,<code>!=</code></p></li>
</ul>
<p>简单来说： <code>==</code> 代表相同，
<code>===</code>代表严格相同</p>
<p>这么理解： 当进行双等号比较时候：
先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同，
则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时，
如果类型不同，直接就是false.</p>
<p>操作数1 == 操作数2， 操作数1 === 操作数2</p>
<p>比较过程：</p>
<ul>
<li>双等号==：
<ol type="1">
<li>如果两个值类型相同，再进行三个等号(===)的比较</li>
<li>如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
<ul>
<li>如果一个是null，一个是undefined，那么相等</li>
<li>如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较</li>
</ul></li>
</ol></li>
<li>三等号===:
<ol type="1">
<li>如果类型不同，就一定不相等</li>
<li>如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN(
) 来判断）</li>
<li>如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。</li>
<li>如果两个值都是true，或是false，那么相等</li>
<li>如果两个值都引用同一个对象或是函数，那么相等，否则不相等</li>
<li>如果两个值都是null，或是undefined，那么相等</li>
</ol></li>
</ul>
<h2 id="unicode编码"><code>Unicode</code>编码</h2>
<p>使用转义字符<code>\u+四位编码</code>在<code>console</code>输出Unicode编码：
<pre class="language-none"><code class="language-none">console.log(&quot;\u0031&quot;);
console.log(&quot;\u2620&quot;);</code></pre> <strong>注意这个值是16进制的</strong></p>
<p>使用<code>&amp;#+CODE+;</code>在网页输出 <pre class="language-none"><code class="language-none">&lt;h1&gt;&amp;#2620;&lt;&#x2F;h1&gt;</code></pre>
<strong>注意这个是十进制的</strong></p>
<h2 id="条件运算符">条件运算符</h2>
<p>三元运算符<code>XX?XX:XX</code>,与C完全相同，区别是C的第二第三位置只能写表达式，但是这里可以写函数</p>
<h2 id="运算符的优先级">运算符的优先级</h2>
<ul>
<li>可以使用<code>,</code>同时声明多个变量</li>
<li>先乘除后加减</li>
<li>同优先级自左向右</li>
<li>优先级同C</li>
</ul>
<h2 id="语句">语句</h2>
<p>JS的语句是一条一条自上到下顺序执行的，使用<code>&#123;&#125;</code>对代码进行分组,<code>&#123;&#125;</code>中的语句称作代码块，代码块内部内容对外完全可见</p>
<ul>
<li>流程控制语句
<ul>
<li>条件判断语句
<ul>
<li>if(条件表达式){语句}，当然单句不需要大括号</li>
<li>if(条件){语句1}else{语句2}</li>
<li>if(条件){语句1}else if(条件){语句2}... else{语句n}</li>
</ul></li>
<li>条件分支语句
<ul>
<li>switch语句,
注意比较方式是<strong>全等</strong>比较，一旦全等从当前开始执行代码，所以和C一样要写<code>break</code>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">switch</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">case</span> <span class="token constant">X</span><span class="token operator">:</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token keyword">case</span> <span class="token constant">Y</span><span class="token operator">:</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token keyword">case</span> <span class="token constant">Z</span><span class="token operator">:</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token keyword">default</span><span class="token operator">:</span>
    <span class="token operator">...</span>
<span class="token punctuation">&#125;</span></code></pre>
十分先进的是<code>switch</code>的<code>case</code>支持case为条件，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">switch</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">case</span> a<span class="token operator">></span><span class="token number">10</span><span class="token operator">:</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token keyword">default</span><span class="token operator">:</span>
    <span class="token operator">...</span>
<span class="token punctuation">&#125;</span></code></pre></li>
</ul></li>
<li>循环语句
<ul>
<li><code>while()&#123;&#125;</code><br />
</li>
<li><code>do&#123;&#125; while()</code></li>
<li>for(;;){}</li>
</ul></li>
<li><code>break</code>&amp;<code>continue</code>
正常模式下与C一样，但是在C在二重循环中想在内部循环中直接退出两个循环必须写flag然后两次break,JS提供了Label的机制可以直接用break退出指定循环而不是最近的循环，例如：
<pre class="language-js" data-language="js"><code class="language-js"><span class="token literal-property property">outer</span><span class="token operator">:</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">100</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>j<span class="token operator">&lt;</span><span class="token number">100</span><span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">==</span><span class="token number">77</span> <span class="token operator">&amp;&amp;</span> j<span class="token operator">==</span><span class="token number">11</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span> outer<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre> 这样<code>break</code>的就不是最近的循环了</li>
</ul></li>
</ul>
<h2 id="输入框">输入框</h2>
<ul>
<li><code>prompt()</code>会弹出一个输入框，需要string作为参数，作为输入的提示,
返回值是输入(和py的input一样)</li>
</ul>
<h2 id="赋值的返回值">赋值的返回值</h2>
<p>与C++相同，赋值的返回值是这个值本身</p>
<p>在C语言中如果你把<code>if(a==5)</code>写成<code>if(a=5)</code>那么一定会得到true,因为相当于是写了<code>if(5)</code>，</p>
<p>在C语言中如果你把<code>if(a==0)</code>写成<code>if(a=0)</code>那么一定会得到false,因为相当于是写了<code>if(0)</code></p>
<p>这里也是一样的</p>
<h2 id="设置计时器">设置计时器</h2>
<p>注意，计时器的不是js里那个多长时间执行一次的计时器，而是个开发者debug的一个普通计时器，写法是
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">time</span><span class="token punctuation">(</span><span class="token string">"计时器名称"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>被计时的代码<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">timeEnd</span><span class="token punctuation">(</span><span class="token string">"计时器名称"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
最后会在浏览器的consol的上显示提示<code>计时器名称:XXms</code></p>
<h2 id="对象简介">对象简介</h2>
<p>对象的分类：</p>
<ol type="1">
<li>内建对象：在任何的ES标准的实现中都可以实现，例如<code>Math</code></li>
<li>宿主对象：JS允许环境提供的对象，主要指的是浏览器提供的对象，例如BOM,
DOM，注意，这两个不是两个对象，而是两个对象族，包含的对象有例如<code>document</code></li>
<li>自定义对象：由开发人员自己创建的对象</li>
</ol>
<p>创建对象</p>
<ol type="1">
<li>使用new关键字调用的函数是构造函数：<code>constructor</code>
构造函数是专门用来构造对象的 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
上面这条命令就构造了一个Object对象</li>
<li>给对象添加属性
<ul>
<li>对象.属性名=属性值 <pre class="language-js" data-language="js"><code class="language-js">obj<span class="token punctuation">.</span>name<span class="token operator">=</span><span class="token string">"AAA"</span></code></pre></li>
</ul></li>
<li>读取对象中的一个属性
<ul>
<li>对象.属性</li>
<li>读取对象没有的属性不会报错，会返回<code>Undefined</code></li>
</ul></li>
<li>修改对象的属性
<ul>
<li>对象.属性名=属性值</li>
</ul></li>
<li>删除对象的属性
<ul>
<li><code>delete 对象.属性名</code></li>
</ul></li>
</ol>
<p>注意事项</p>
<ul>
<li>对象的属性名不强制使用变量规范，例如<code>var</code>是接受的，但是不建议，注意的是，如果使用特殊名，要用如写写法增删查改<code>obj["属性名]="LALALAL"</code></li>
<li>受益于动态语言，JS对象的属性值接受任何类型</li>
<li><code>in</code>运算符：<code>属性名</code> in <code>对象</code>
返回对象是否包含属性名的bool类型，属性名加引号</li>
<li>对象类型属于引用数据类型，<code>类似</code>于是C++的引用，如果一个对象是通过赋值得到的，元对象变化，被赋值的变量也会变化</li>
<li>注意这里的引用不是C++的引用，每一个对象实际的值是指针，所以可以设置<code>obj=NULL</code>取消这种联系，综上，这里的引用实际上相当于是一种指针</li>
<li>当你比较两个对象，他实际上比较的是两个对象的内存地址</li>
<li><strong>一定记住，JS的对象的引用和C++的指针一样</strong></li>
</ul>
<h2 id="对象字面量">对象字面量</h2>
<p>可以通过对象字面量的方式创建对象，例如： <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> obj2<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">"AAA"</span><span class="token punctuation">,</span><span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">"BBB"</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span></code></pre>
对象字面量属性名可以加<code>"</code>也可以不加，不建议加，使用特殊属性名必须加</p>
<p>最后一个属性后面不要加逗号</p>
<h2 id="函数">函数</h2>
<ul>
<li>函数也是一个对象</li>
<li>函数可以封装一些功能，在执行的时候需要执行这一系列代码</li>
<li>声明方法 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> fn <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></li>
</ul>
<p>可以将要封装的代码以一种特殊的字符串的方式传递给构造函数</p>
<p>函数中的代码会在函数调用的时候执行</p>
<p>调用的方法是 <code>函数对象()</code>,这样函数会按照调用顺序执行</p>
<p>在开发中很少使用构造函数构造一个函数</p>
<p>可以使用函数声明创建一个函数 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>形参<span class="token number">1</span><span class="token punctuation">,</span>形参<span class="token number">2</span><span class="token punctuation">,</span>形参<span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">,</span>形参<span class="token constant">N</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token operator">...</span>
<span class="token punctuation">&#125;</span></code></pre></p>
<p>可以在<code>console.log(函数名)</code>查看函数内容</p>
<p>调用方法与之前相同</p>
<p>可以不写函数名创建一个匿名函数，例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token operator">...</span><span class="token punctuation">&#125;</span></code></pre></p>
<p>可以在函数的括号中指定多个参数，受益于动态语言，不需要写明类型，解析器也不检查调用的时候实参的数量与类型，实参从左向右读，多的不管，如果少给了，没给的全部undefined</p>
<p>函数支持返回值<code>return val;</code>,return 之后的语句都不执行</p>
<p>得益于动态语言，可以肆无忌惮的使用一个(非)匿名对象(甚至是函数对象)作为参数</p>
<p>函数内部支持嵌套函数，这个时候要注意<code>fn4</code>是函数对象，值是代码的内容，<code>fn4()</code>是函数，值是函数的返回值</p>
<p>如果一个函数作为对象赋值给对象的一个属性那么这个函数也被称作<code>方法</code></p>
<h2 id="立即执行函数">立即执行函数</h2>
<p>有点函数我想让他在创建之后立即执行，但是只想让他执行一次，因为执行一次，给他一个对象或者是一个函数名似乎有点浪费，我们可以创建一个立即执行函数，就是在匿名函数的基础上外面加一个<code>()</code>,
例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token operator">...</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span></code></pre></p>
<h2 id="枚举对象中的属性">枚举对象中的属性</h2>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> n <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  consol<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>注意这个方法会吧对象中每一个<strong>属性的名字</strong>赋值给变量，而不是属性值，可以做如下改进</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> n <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  consol<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token operator">+</span><span class="token string">"="</span><span class="token operator">+</span>obj<span class="token punctuation">[</span>n<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre>
<h2 id="全局作用域">全局作用域</h2>
<p>在JS中一共有两种作用域：</p>
<ol type="1">
<li>全局作用域
<ul>
<li>直接编写在script标签中的js代码都在全局作用域</li>
<li>变量在页面打开时创建，在页面关闭的时候销毁</li>
<li>全局作用域中有一个全局对象<code>window</code>
他代表着浏览器窗口，他由浏览器创建可以直接使用，</li>
<li>在全局作用域用所有创建的对象都会作为window对象的属性保存，可以通过如下方式证明:
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>
  <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre></li>
<li>考虑到对一个普通变量可以不声明直接定义成员函数，所以window对象理论上可以这么做，于是发现<code>var a=1</code>与<code>a=1</code>其实都可以声明一个变量</li>
</ul></li>
<li>函数作用域
<ul>
<li>调用函数的时候被创建 函数结束的时候销毁，每一次调用相互独立，
在函数中可以访问到全局变量，变量冲突的时候会保护内部变量，
如果实在是想访问全局变量可以使用<code>window.XX</code></li>
</ul></li>
</ol>
<h2 id="声明提前">声明提前</h2>
<p>考虑运行以下代码 <pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a="</span><span class="token operator">+</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"b="</span><span class="token operator">+</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    a<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre> 会得到如下结果 <pre class="language-none"><code class="language-none">49 Uncaught ReferenceError: a is not defined
b&#x3D;undefined</code></pre>
可以看到b与a的报错不同，似乎是在说b定义了但是没有初始化，这是因为js在程序运行之前会将所有<code>var</code>的变量做提前声明，相当于执行了如下代码
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    <span class="token keyword">var</span> b<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a="</span><span class="token operator">+</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"b="</span><span class="token operator">+</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    a<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
    b<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre></p>
<p>理论上，函数也是一个对象，变量是什么样的函数也应该是什么样的,
我们写下如下代码</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> <span class="token function-variable function">fun2</span><span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>这相当于是做了函数的不声明就调用，但是fun1()顺利执行了，fun2()报错
<pre class="language-none"><code class="language-none">Uncaught TypeError: fun2 is not a function</code></pre></p>
<p>这是因为我们可以理解变量的<code>var</code>相当于就是函数的<code>function</code>
所以第一个相当于是直接声明，第二个实际上是声明了一个变量等于这个函数对象，只是提前了变量，没有提前那个等于函数,上述代码相当于:(注意，函数提前声明的时候连值一起提前了)
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> fun2<span class="token punctuation">;</span>

<span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function-variable function">fun2</span><span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre></p>
<p><strong>注意声明提前是提前到作用域开始时</strong></p>
<p><strong>我们说如果不写<code>var</code>就声明便来嗯相当于是声明了window的变量，所以在函数作用域内不加<code>var</code>声明的变量也相当于是声明了一个全局作用域的变量</strong></p>
<h2 id="debug">debug</h2>
<p>在要调试的代码前加入<code>debugger;</code>或者在浏览器source里面加入断点</p>
<h2 id="this">this</h2>
<p>JS解析器在每次调用函数的时候都会向函数内部传递一个隐含的参数，这个隐含参数就是<code>this</code></p>
<p>我们可以尝试输出<code>this</code></p>
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<pre class="language-js" data-language="js"><code class="language-js">Window <span class="token punctuation">&#123;</span><span class="token literal-property property">window</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">document</span><span class="token operator">:</span> document<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token literal-property property">location</span><span class="token operator">:</span> Location<span class="token punctuation">,</span> …<span class="token punctuation">&#125;</span>
<span class="token number">0</span><span class="token operator">:</span> Window <span class="token punctuation">&#123;</span><span class="token literal-property property">window</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">document</span><span class="token operator">:</span> document<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token literal-property property">location</span><span class="token operator">:</span> Location<span class="token punctuation">,</span> …<span class="token punctuation">&#125;</span>
<span class="token literal-property property">alert</span><span class="token operator">:</span> ƒ <span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">atob</span><span class="token operator">:</span> ƒ <span class="token function">atob</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">blur</span><span class="token operator">:</span> ƒ <span class="token function">blur</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">btoa</span><span class="token operator">:</span> ƒ <span class="token function">btoa</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">caches</span><span class="token operator">:</span> CacheStorage <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token literal-property property">cancelAnimationFrame</span><span class="token operator">:</span> ƒ <span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">...</span><span class="token operator">...</span></code></pre>
<p><code>this</code>指向的是一个对象，叫做上下文对象，根据函数的调用方式，this会指向不同的对象，我们定义一个对象，里面包含一个函数对象</p>
<pre class="language-js" data-language="js"><code class="language-js">
<span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">//console.log("a= "+a+",b= "+b);</span>
  <span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">"12"</span><span class="token punctuation">,</span>
  hh<span class="token operator">=</span>fun<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

obj<span class="token punctuation">.</span><span class="token function">hh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>得到如下结果 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"12"</span><span class="token punctuation">,</span> <span class="token literal-property property">hh</span><span class="token operator">:</span> ƒ<span class="token punctuation">&#125;</span>
<span class="token literal-property property">hh</span><span class="token operator">:</span> ƒ <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"12"</span>
<span class="token literal-property property">__proto__</span><span class="token operator">:</span> Object

Window <span class="token punctuation">&#123;</span><span class="token literal-property property">window</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">document</span><span class="token operator">:</span> document<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token literal-property property">location</span><span class="token operator">:</span> Location<span class="token punctuation">,</span> …<span class="token punctuation">&#125;</span>
<span class="token number">0</span><span class="token operator">:</span> Window <span class="token punctuation">&#123;</span><span class="token literal-property property">window</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span> Window<span class="token punctuation">,</span> <span class="token literal-property property">document</span><span class="token operator">:</span> document<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token literal-property property">location</span><span class="token operator">:</span> Location<span class="token punctuation">,</span> …<span class="token punctuation">&#125;</span>
<span class="token literal-property property">alert</span><span class="token operator">:</span> ƒ <span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">atob</span><span class="token operator">:</span> ƒ <span class="token function">atob</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">blur</span><span class="token operator">:</span> ƒ <span class="token function">blur</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">btoa</span><span class="token operator">:</span> ƒ <span class="token function">btoa</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">caches</span><span class="token operator">:</span> CacheStorage <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token literal-property property">cancelAnimationFrame</span><span class="token operator">:</span> ƒ <span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">cancelIdleCallback</span><span class="token operator">:</span> ƒ <span class="token function">cancelIdleCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">captureEvents</span><span class="token operator">:</span> ƒ <span class="token function">captureEvents</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">chrome</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span><span class="token literal-property property">loadTimes</span><span class="token operator">:</span> ƒ<span class="token punctuation">,</span> <span class="token literal-property property">csi</span><span class="token operator">:</span> ƒ<span class="token punctuation">&#125;</span>
<span class="token literal-property property">clearInterval</span><span class="token operator">:</span> ƒ <span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token literal-property property">clearTimeout</span><span class="token operator">:</span> ƒ <span class="token function">clearTimeout</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">...</span></code></pre></p>
<p>根据函数调用方式不同，函数的this不同，注意<strong>是调用方式不同，不是存储地址不同</strong>，以函数的形式调用，永远是<code>window</code>如果是对象以方法的形式调用，<code>this</code>指向的就是这个对象</p>
<h2 id="使用factory创建对象">使用factory创建对象</h2>
<p>通过factory可以大批量的创建对象</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">creatPeople</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age<span class="token punctuation">,</span>sex</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> obg<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        obg<span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">;</span>
        obg<span class="token punctuation">.</span>age<span class="token operator">=</span>age<span class="token punctuation">;</span>
        obg<span class="token punctuation">.</span>sex<span class="token operator">=</span>sex<span class="token punctuation">;</span>
        obg<span class="token punctuation">.</span><span class="token function-variable function">sayname</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
        <span class="token keyword">return</span> obg<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token keyword">var</span> o1<span class="token operator">=</span><span class="token function">creatPeople</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">"male"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> o2<span class="token operator">=</span><span class="token function">creatPeople</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token string">"male"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> o3<span class="token operator">=</span><span class="token function">creatPeople</span><span class="token punctuation">(</span><span class="token string">"C"</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token string">"female"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    o1<span class="token punctuation">.</span><span class="token function">sayname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<p>有一个缺点是使用这种方式创建的对象全部是Object类的对象，我们无法区分这个对象到底是什么</p>
<h2 id="构造函数">构造函数</h2>
<p>我们可以创建一个构造函数，让构造函数帮我们创建对象</p>
<p>构造函数与一般函数没有区别，建议首字母大写</p>
<p>构造函数调用的时候JS解释器：</p>
<ol type="1">
<li>立刻创建一个对象</li>
<li>将this设置为他创建的对象</li>
<li>逐行执行程序中的代码</li>
<li>返回对象</li>
</ol>
<p>我们可以做如下调用</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age<span class="token punctuation">,</span>sex</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token operator">=</span>age<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>sex<span class="token operator">=</span>sex<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    syc<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"syc"</span><span class="token punctuation">,</span><span class="token number">17</span><span class="token punctuation">,</span><span class="token string">"man"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>syc<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<p>可以使用 <code>instanceof</code> 判断一个对象是不是一个类的实例
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>syc <span class="token keyword">instanceof</span> <span class="token class-name">Person</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 返回<code>true</code></p>
<p><strong>所有的对象都是<code>Obejct</code>的实例</strong></p>
<p>这样的构造函数存在问题，
如果我的类中有一个成员函数，那么用如上的方式会创建100个对象，那么也会定义100个完全相同但是相互独立的成员函数，这会造成大量的浪费，我们可以在全局定义一个函数，然后声明变量的时候直接等于这个函数，这种方式节约了空间，但是全局函数会造成其他名字冲突与函数被其他对象调用的bug,造成程序不安全</p>
<h2 id="原型对象">原型对象</h2>
<p>原型属性: prototype</p>
<p>我们每创建一个函数的时候JS解析器会想函数中添加一个属性prototype</p>
<p>同样的，对象也具有<code>prototype</code>属性，但是不能直接访问，可以使用<code>obj.__proto__</code>访问，</p>
<p>同一个New函数做出来的对象，他们的原型对象属性都是相同的，这是因为<code>obj.__proto__</code>是个指针，指向<code>prototype</code>,也就是说同一个类具有相同的原型对象</p>
<p>代码 <pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
    <span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>

    <span class="token punctuation">&#125;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"fun.prototype= "</span><span class="token operator">+</span>fun<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> mc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc<span class="token punctuation">.</span>__proto__<span class="token operator">==</span>fun<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> mc2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc2   <span class="token punctuation">.</span>__proto__<span class="token operator">==</span>mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
我们可以利用这个原型对象实现构造函数成员重复定义的问题，因为原型对象也是一个对象，把函数写在这个对象里面，实例的对象用的是原型的指针，所以只占用了一个指针空间，因为原型对象是构造函数的对象，别人不好访问，其次，JS有一个特点是对象如果调用自己的元素，如果自己作用域没有，会去原型对象里面找，原型没有才会去全局找，于是我们可以写出以下代码
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">People</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>

<span class="token punctuation">&#125;</span>

<span class="token class-name">People</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayname</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token operator">...</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> New <span class="token function">People</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span>

a<span class="token punctuation">.</span><span class="token function">sayname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p>
<p>用如下方式写成员函数与变量 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">People</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">toString</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token keyword">return</span> <span class="token string">"Hello World"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> mc<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">People</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p>
<p>检查属性名是否在对象中，还是用<code>in</code>,但是如果属性是在prototype中也会产生true，若想区分，可以使用<code>obj.hasOwnProperty("属性名")</code>这样的话只有直接定义的会返回true，定义在prototype中的会false</p>
<p>原型对象也是对象，所以原型对象也有原型</p>
<p>当我们使用一个对象或者方法的时候会先使用，没有去原型对象，如果没有就去原型的原型找</p>
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>我们发现有原型的原型，没有原型的原型的原型</p>
<p>这是因为我们定义的一个类，那么他的实例的原型是这个构造函数的原型，而这个构造函数的原型指向了他的父类Object的原型,证明如下,在console下</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">People</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> mc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">People</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> md <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span>
mc<span class="token punctuation">.</span>__proto__ <span class="token operator">==</span> md<span class="token punctuation">.</span>__proto__
mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__ <span class="token operator">==</span> md<span class="token punctuation">.</span>__proto__</code></pre>
<p>第一个返回false，第二个true，做如下实验 <pre class="language-js" data-language="js"><code class="language-js">mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__
mc<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__
md<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__
md<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__</code></pre>
结果是NULL，<code>Uncaught TypeError: Cannot read property '__proto__' of null</code>,NULL，<code>Uncaught TypeError: Cannot read property '__proto__' of null</code></p>
<p>三四是等价于一二的，只有我们看<code>mc.__proto__.__proto__.__proto__</code>相当于是mc的原型的原型的原型，mc的原型的原型就是md的原型，就是Object的原型对象，这个Object的原型对象也是对象，所以Object的原型对象也有<code>__proto__</code>但是他没有父类，相当于他的<code>__proto__</code>不指向任何对象，所以是NULL，这样的话如果我们访问<code>mc.__proto__.__proto__.__proto__.__proto__</code>相当于是访问<code>Object.__proto__.__proto__</code>,相当于是<code>NULL.__proto__</code>，所以报错</p>
<p>p.s. 在console下写<code>New</code>的时候<code>N</code>不能大写！</p>
<h2 id="tostring">toString</h2>
<p>我们在打印对象console.log的时候，输出的结果默认是obj.toString()的返回值，如果我们实在是不想看这个数据，可以通过
<strong>重写</strong>
toString解决，请注意，是重写不是重载，区别参考C++，我们还要保证重写的函数比原来的toString优先调用，可以发现<code>mc.__proto__.__proto__.hasOwnProperty("toString")</code>=true,
也就是说toString是定义在Object里面的函数，所以我们只要定义我们的toString在<code>mc</code>或者<code>mc.__proto__</code>里面，就会被优先调用，写下函数
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>
<span class="token keyword">function</span> <span class="token function">People</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> mc<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">People</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

mc<span class="token punctuation">.</span><span class="token function-variable function">toString</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token keyword">return</span> <span class="token string">"Hello World"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mc<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p>
<p>似乎没有正常显示，是因为2020年这个方法挂了</p>
<h2 id="垃圾回收gc">垃圾回收(GC)</h2>
<ul>
<li>程序在运行过程中会产生垃圾,
会导致程序运行过慢，所以我们需要一个垃圾回收机制</li>
</ul>
<p>当一个对象没有任何变量指向他/对他引用，这种对象就是垃圾，他会大量占用内存空间，所以必须清理</p>
<p>JS目前有自动的垃圾回收机制，会自动销毁，我们也不能进行人工干预</p>
<p>如果想让js进行回收可以直接让指向他的对象全部设为NULL，这样会自动回收垃圾，相当于我们只进行了吧对象认到垃圾桶，谁回收，如何销毁不用我们管</p>
<h2 id="数组">数组</h2>
<ul>
<li><p>数组也是对象</p></li>
<li><p>他和普通对象功能类似，也是用来存值</p></li>
<li><p>不同的时候变量是用字符串做索引的，数组是用索引值访问的</p></li>
<li><p>创建数组 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p></li>
<li><p>添加/读取元素 <pre class="language-js" data-language="js"><code class="language-js">arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">=</span>p<span class="token punctuation">;</span></code></pre></p></li>
<li><p>读取不存在的索引返回<code>Undefined</code></p></li>
<li><p>获取<strong>连续</strong>数组数组长度<code>arr.length</code></p></li>
<li><p>对于<strong>不连续</strong>的数组，会返回元素最大占用索引+1</p></li>
<li><p>可以用<code>console.log(arr)</code>打印数组，但是对于非连续数组会在没定义的地方不显示，于是会出现一堆<code>,,,</code>
<pre class="language-js" data-language="js"><code class="language-js">arr<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">3</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">10</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 会输出 <pre class="language-none"><code class="language-none">0,1,2,3,,,,,
0,1</code></pre>
可以看到手动修改arr的length会影响输出</p></li>
<li><p>小技巧，像数组最后元素输出： <pre class="language-js" data-language="js"><code class="language-js">arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">3</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">4</span><span class="token punctuation">;</span></code></pre>
正好执行一个命令长度也会相应变化</p></li>
</ul>
<h2 id="使用字面量创建数组">使用字面量创建数组</h2>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>可以创建的时候初始化</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>也可以使用如下方式</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><strong>注意如上方式的问题</strong>,如果括号里的元素大于一个，没有问题，会作为数组的元素，如果只写一个元素，会被认为是创建了一个大小为那个元素的<strong>空数组</strong></p>
<p>例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> arr2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 相当于是<code>,,,,,,,,,</code></p>
<p>因为是动态语言，所以里面可以放任意类型的元素，包括函数，数组</p>
<h2 id="数组的常用方法">数组的常用方法</h2>
<ol type="1">
<li><code>push</code>
向数组后面添加一个或多个元素，返回值是push之后的长度</li>
<li><code>pop</code> 删除然后返回数组的最后一个元素</li>
<li><code>unshift</code> 向数组开头添加一个或多个元素，返回数组长度</li>
<li><code>shift</code> 删除第一个元素，返回第一个元素值</li>
</ol>
<h2 id="数组的遍历">数组的遍历</h2>
<p>除了使用 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>s<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">+=</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token operator">...</span></code></pre></p>
<p>还可以使用<code>forEach()</code>方法，用法如下</p>
<pre class="language-js" data-language="js"><code class="language-js">arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
   <span class="token operator">...</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>JS执行的时候会执行<code>arr.length</code>次括号里的函数，程序会依次传递数组中每一个元素的值,下标，完整的数组作为三个参数传过去，程序只要接受他参数，当然，可以不使用匿名函数,可以给一个函数名</p>
<p><strong>注意，<code>forEach</code>在IE9-不支持</strong></p>
<h2 id="数组的其他方法">数组的其他方法</h2>
<p><code>arr.slice(begin,end)</code>获取数组[begin,end)的子数组</p>
<p>该函数是方法，不修改数组，只返回子数组</p>
<p>第二个参数接受省略不写，会截取begin到结尾的子数组</p>
<p>如果索引是负数，就是从后往前走，和python一样</p>
<p><code>splice()</code>删除指定位置的元素，第一参数是要删除的位置(接受负数),第二个参数是删除的个数(如果是0就不删除)，第三个是要添加的元素(可选)</p>
<p><code>arr.concat(arr2,arr3,...)</code>链接多个个数组，然后将结果返回，不会修改原来的数组,当然，数组位置直接放元素也是接受的</p>
<p><code>.join()</code>返回将元素转化为字符串的结果，不影响原数组，同时括号内可以选择拼接元素，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span>a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span>
<span class="token operator">>>></span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span>a<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">>>></span><span class="token string">"1,2,3"</span>
<span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span>a<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">" and "</span><span class="token punctuation">)</span>
<span class="token operator">>>></span><span class="token string">"1 and 2 and 3"</span></code></pre></p>
<p><code>reverse()</code>
反转数组<strong>注意这个方法会直接修改原数组</strong></p>
<p><code>sort()</code>对数组元素进行排序，<strong>unicode顺序</strong>，即使是对于纯数字也是用unicode排序，例如<code>2 3 11 8</code>会变成<code>11 2 3 8</code>,因为<code>1</code>比<code>2</code>大，支持自定义排序方式，自定义与C++不一样，返回正数表示前面的比后面的大，返回负数表示比后面的小，返回0表示相等，所以如果直接<code>return a&lt;b</code>会导致<code>=</code>与<code>&gt;</code>都认为是<code>=</code>，不交换顺序，于是有一个简单的写法:
<pre class="language-js" data-language="js"><code class="language-js">a<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">11</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> a<span class="token operator">-</span>b<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p>
<h2 id="函数对象的方法">函数对象的方法</h2>
<p>函数也是一个对象，所以函数也有方法，注意的是<code>fun()</code>不是函数，是调用函数之后的返回值，如果要进行函数对象操作应该去掉<code>()</code>做为一个对象进行操作</p>
<p><code>call()</code>和<code>apply()</code>两个方法，当使用<code>fun.call()</code>与<code>fun.apply()</code>都可以实现函数的调用，区别是:
在调用<code>call</code>与<code>apply</code>的时候，我们可以即将第一个参数作为调用函数的对象，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> a<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
第一个调用输出的是window对象，第二个和第三个输出的是对象a</p>
<p>注意，第一个参数是<code>obj</code>必须写上，之后的元素，如果是call直接正常调用即可，如果是apply那么需要将所有实参封装到一个数组中去调用</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> a<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>

<span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>返回值分别是: <pre class="language-none"><code class="language-none">window... 1 2
&#123;&#125; 1 2
ERROR
&#123;&#125; [1,2] undefined
&#123;&#125; 1 2</code></pre></p>
<h2 id="参数列表">参数列表</h2>
<p>在js中当我们去调用函数的时候，js解释器会想函数传递两个隐含的参数，(原来说只有以后是this)，其实还有一个叫，<code>arguments</code>，里面的内容就是程序调用的时候的实参列表,注意，你可以这样理解，实参调用的时候会先传递到arguments里面，然后一个一个在赋值给函数定义的形参，所以，理论上我们可以不写形参，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">function</span> <span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun2</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
注意，不管你定义不定义形参，获取的arguments长度就是实参的个数</p>
<p>注意从0开始</p>
<p>两个调用结果相同(动态语言太香了)，</p>
<p><code>argument.callee</code>是argument的一个对象，内容是被调用函数的对象(相当于双向可以知道对方全部内容，(不安全？))</p>
<h2 id="date对象">date对象</h2>
<p>在JS中使用date表示时间 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
直接使用构造函数声明会显示当前代码执行的时间</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> d2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">"12/03/2020 11:12:3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>格式是:<code>月/日/年 小时:分:秒</code>,注意，年写YYYY,如果只写YY会被IE识别为19YY</p>
<ul>
<li><code>.getDate()</code> 是几号</li>
<li><code>.getDay()</code>
是一周中年那一天,注意，周日是<code>0</code>,周一是<code>1</code>，以此类推</li>
<li><code>.getMonth()</code> 当前对象是第几月 1月是0</li>
<li><code>.getFullYear()</code> 返回YYYY</li>
<li><code>.getYear()</code> 废除</li>
<li><code>.getTime()</code> 输出时间戳(从1970.1.1 0:0:0
花费的<strong>ms</strong>数，注意与C++不同，没有系统时钟)，如果你有兴趣输出
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> mydate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">"1/1/1970 0:0:0"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mydate<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 返回的不是0
，而是<code>-28800000</code>,因为浏览器认为你输入的是中国(东八区)时间</li>
<li>获取当前时间戳<code>mydate=Date.now();</code></li>
</ul>
<h2 id="math">Math</h2>
<p>虽然M是大写的，但是不是构造函数，是一个工具对象，拿开直接用</p>
<ul>
<li><code>.PI</code> 表示圆周率，一般全大写的表示常量</li>
<li><code>.abs(n)</code> n的绝对值</li>
<li><code>.cos(x)/.tan(x)/.sin(x)</code> 三角运算</li>
<li><code>.ceil(x)/.floor(x)</code> 向上向下取整</li>
<li><code>.round()</code> 四舍五入取整</li>
<li><code>.random()</code> 生成(0,1)的随机数</li>
<li><code>.max()/.min()</code> 最大最小值，参数数目不限</li>
<li><code>.pow(x,y)</code> 返回x^y</li>
<li><code>.sqrt(x)</code> 开方运算</li>
</ul>
<h2 id="包装类">包装类</h2>
<p>JS中的数据类型有:</p>
<ul>
<li>基本数据类型: <code>Number</code> <code>String</code>
<code>Boolean</code> <code>Null</code> <code>Undefined</code></li>
<li>引用数据类型: <code>Object</code></li>
</ul>
<p>在JS中提供了三个包装类，我们可以通过这三个包装类将基本数据类型转化为对象，有<code>Number</code>,<code>Boolean</code>,<code>String</code></p>
<p>例如: <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">12</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 为 <pre class="language-none"><code class="language-none">object
number</code></pre></p>
<p>使用包装类的优点是:
可以为这个新的包装类<code>a</code>设置很多自定义的方法，但是<code>b</code>不可以</p>
<p>但是，存在一个问题，两个对象即使内容相同，用来做<code>==</code>还是不同，因为对象的值是对象的<code>地址</code>，不是值，但是，时候解释器又会将Object转化为基本数据类型进行比较，这个时候<code>==</code>为true<code>===</code>为false</p>
<p>可见，在比较的时候，这个包装类存在诸多问题，不建议使用，
在开发的时候千万不要用</p>
<p>这个东西的作用是给JS底层用的，我们发现与C++不同，C++的string是一个类，自带了很多方法，但是JS不是，基本数据类型只存储数据，那么需要方法的时候怎么处理呢?
JS会自动<strong>临时</strong>将基本数据类型转化为<strong>包装类</strong>，调用，然后在转换回来</p>
<h2 id="string">String</h2>
<p>在底层，字符串是以字符数组的方式保存的，所以可以使用[]访问元素</p>
<ul>
<li><code>str.charAt()</code>指定位置的元素，与<code>[]</code>方式获取的结果一样</li>
<li><code>str.charCodeAt()</code>获取指定位置元素的unicode</li>
<li><code>String.fromCharCode(X)</code>注意前面两个函数是字符串的函数，这个函数是<strong>字符串构造函数</strong>的，作用是Unicode转文字(支持0x的16进制)</li>
<li><code>str1.concat(str2,str3...)</code>连接字符串</li>
<li><code>str1.indexOf(str2)</code>检索字符串str1中是否包含指定内容str2，返回第一次出现的位置，找不到返回<code>-1</code></li>
<li><code>str1.indexOf(str2,i)</code>从第i位开始检索字符串中是否包含指定内容，返回第一次出现的位置，找不到返回<code>-1</code></li>
<li><code>str1.lastIndexOf(str2,i)</code>与<code>indexOf</code>相同，是从后往前找，注意同样可选i,表示从正数第几个开始往前找</li>
<li><code>slice()</code>截取字符串</li>
<li><code>substring()</code>
截取字符串，与<code>slice</code>不同的是不接受负数，遇到负数自动换成0,遇到前大于后会自动调整参数位置</li>
<li><code>str1.split(str2)</code>用str2为标记拆分str1,返回字符串数组</li>
<li><code>str.toUpperCase()</code> 字符串转全大写</li>
<li><code>str.toLowerCase()</code> 字符串转全小写</li>
</ul>
<h2 id="正则表达式">正则表达式</h2>
<p>正则表达式用来定义字符串的某些规则，计算机可以根据正则表达式判断一个字符串是否符合规则，将合法字符串提取出来</p>
<p>写法：<code>var reg = new RegExp("正则表达式","匹配模式")</code></p>
<p>正则有一个方法<code>test(str)</code>判断str是否符合正则</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"a"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>正则表达式:</p>
<ul>
<li>"a"： 这个正则表示字符串中是否包含"a"</li>
<li>"a|b" 使用<code>|</code>表示或者的意思，也就是匹配a或b</li>
<li>"[ab]" 匹配a或b</li>
<li>"[a-z]" 匹配a到z，相当于匹配所有小写字母</li>
<li>"[A-Z]" 匹配A到Z，相当于匹配所有小写字母</li>
<li>"[A-z]" 匹配A到Z，相当于匹配所有字母</li>
<li>"a[bde]c" 第一个是a,最后是c,中间bcd随意</li>
<li>"[^ab]" 匹配除了ab以外的</li>
<li>"[0-9]" 匹配任意数字</li>
<li>"a{3}" 连续出现三次a的字符串</li>
<li>"(ab){3}" ab连续出现3次</li>
<li>"(ab){1,3}" ab连续出现1-3次(1或2或3)</li>
<li>"(ab){3,}" ab连续出现三次以上</li>
<li>"(ab)+" 至少出现一次，·相当于{1,}</li>
<li>"(ab)*" 有没有都可以, 相当于{0，}</li>
<li>"(ab)?" 0或1个,相当于{0,1}</li>
<li>"^a"
以a开头的，注意于[^a]不同<code>/[(^a)(^b)(^c)]ba&#123;3&#125;/.test("abaaa")</code>区分</li>
<li>"a$" 以a结尾</li>
<li>"^a$" a即使开头也是结尾，注意相当于只能匹配"a"不能是"aaa"</li>
<li>"."
除了"","的任意字符，如果想表示单纯的<code>.</code>可以使用转移<code>\.</code>，同理\表示<br />
</li>
<li>" 匹配0-9</li>
<li>"" 匹配非数字</li>
<li>"" 匹配空格</li>
<li>"" 匹配非空格</li>
<li>" 匹配单词边界，就是这个字符是两个单词的分界点</li>
<li>"" 匹配非单词边界</li>
<li>"[(^)($)]*"开头或者结尾的空格 匹配模式：</li>
<li>"i": 忽略大小写</li>
<li>"g": 将所有符合题意的全找到</li>
<li>接受连写</li>
</ul>
<p>可以使用
<code>var reg = /a/i</code>创建正则表达式，第一个参数是表达式，第二个是匹配模式，注意，这里不能写双引号，这个形式的表达式里面不能写变量</p>
<p>将正则表达式应用到字符串中</p>
<ul>
<li><p><code>str.split()</code>还是原来的正则拆分函数，应用如下
<pre class="language-js" data-language="js"><code class="language-js"><span class="token string">"a1b2c3d4e5"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[A-z]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 得到 <pre class="language-none"><code class="language-none">(6) [&quot;&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;]</code></pre></p></li>
<li><p><code>.search()</code>搜索字符串中是否含有指定内容，搜索到内容返回指定索引与<code>indexOf</code>类似，只找第一个，即使开了全局也不可以</p></li>
<li><p><code>.match()</code>从一个字符串中将符合条件的提取出来
<pre class="language-js" data-language="js"><code class="language-js"><span class="token string">"a1b2c3d4e5"</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[A-z]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token string">"a1b2c3d4e5"</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[A-z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 结果 <pre class="language-none"><code class="language-none">[&quot;a&quot;, ...]
(5) [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;]</code></pre> 注意这个方法匹配的结果数组</p></li>
<li><p><code>replace()</code>两个参数，被替换的正则表达式，替换之后的内容，默认只替换第一个，需要开启全局模式，第二个参数不写相当于就是删除</p></li>
</ul>
<p><strong>UPD 20201201</strong></p>
<p>尝试在浏览器运行以下代码 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> reg<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">"^\/file\/"</span><span class="token punctuation">,</span><span class="token string">"ig"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"\/file\/123"</span><span class="token punctuation">)</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"\/file\/123"</span><span class="token punctuation">)</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"\/file\/123"</span><span class="token punctuation">)</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"\/file\/123"</span><span class="token punctuation">)</span></code></pre>
得到了一个交替出现的true&amp;false,这是因为<br />
正则.test()等几乎所有正则对象的方法都会记忆上次正则到的位置，在下次匹配同一个对象(同一个静态值有可能会被视为同一个对象)时，会从这个位置开始向后继续查找，如：<br />
正则匹配全局后
lastIndex会加1，下一次匹配会变成从前一个匹配到的位置开始，所以匹配失败，匹配失败后lastIndex会变成0，再下一次匹配从第一位开始，匹配成功</p>
<p>解决:</p>
<ol type="1">
<li>定义变量接收let bool=reg.test(str),后面用bool判断</li>
<li>去掉/g</li>
<li>手动把reg.lastIndex=0</li>
</ol>
<h2 id="dom">DOM</h2>
<p>DOM是文档对象模型的简称，JS中可以通过DOM对HTML文档进行操作</p>
<ul>
<li>文档: 指的是整个HTML页面</li>
<li>对象: 表示将文档的每一个部分都转化为了一个对象</li>
<li>模型: 表示对象之间的关系，方便我们获取对象</li>
<li>节点: 是我们网页的基本组成部分，是文档最基本的单元，大致可以分成四种
<ul>
<li>文档节点: 整个HTML文档</li>
<li>元素节点: HTML中的标签</li>
<li>属性节点: 元素的属性</li>
<li>文本节点: HTML标签中的文字内容</li>
</ul></li>
<li>节点的属性:</li>
</ul>
<table>
<thead>
<tr class="header">
<th></th>
<th>nodeName</th>
<th>nodeType</th>
<th>nodeValue</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>文档节点</td>
<td>#documrnt</td>
<td>9</td>
<td>null</td>
</tr>
<tr class="even">
<td>元素节点</td>
<td>标签名</td>
<td>1</td>
<td>null</td>
</tr>
<tr class="odd">
<td>属性节点</td>
<td>属性名</td>
<td>2</td>
<td>属性值</td>
</tr>
<tr class="even">
<td>文本节点</td>
<td>#text</td>
<td>3</td>
<td>文本内容</td>
</tr>
</tbody>
</table>
<p>上述东西都是用来操作网页的</p>
<p>例如我们可以使用如下代码操作网页 <pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是一个按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        <span class="token comment">// 浏览器已经为我们提供了文档节点，代表整个网页</span>
        <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btm"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 绑定对象</span>
        btn<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">"123"</span><span class="token punctuation">;</span>   <span class="token comment">// 修改文字</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<h2 id="dom中的事件">DOM中的事件</h2>
<p>事件是浏览器和文档窗口之间发生的交互瞬间,比如鼠标移动，点击按钮，关闭页面...</p>
<p>我们可以在事件对应的属性中设置一下代码，时间被触发的时候执行
<pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是一个按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        <span class="token comment">//获取按钮</span>
        <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btm"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 为单击时间绑定一个函数</span>
        btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"123"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<p>浏览器在家在一个页面的时候是自上向下家在的,读一行运行一行那个,如果script太靠上会导致先加载代码后显示网页</p>
<p>如果执意想写上面的话,要加入命令告诉浏览器加载完成之后在执行,命令是<code>onload</code>
<pre class="language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"123"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre></p>
<p>如果想追求性能写下面</p>
<p>去生产环境其实那里都有</p>
<h2 id="获取元素节点对象">获取元素节点对象</h2>
<ul>
<li><code>document.getElementById()</code>通过ID获取一个元素节点的对象,注意是Element不是Elements所以必须是一个元素</li>
<li><code>document.getElementsByTagName()</code>注意这里是Elements,所以是返回一组对象
通过节点标签获取</li>
<li><code>document.getElementsByName()</code>注意这里是Elements,所以是返回一组对象
通过Name属性获取</li>
</ul>
<p>注意:
<code>getElementsByTagName()</code>等elements函数返回的都是一个类数组对象,查询到的元素都会封装到类数组中,即使查询到的元素只有一个也会被封装到一个数组中</p>
<p>对于自结束标签,innerHtml无意义</p>
<p>如果需要读取元素节点的属性直接就是<code>元素.属性名</code>,只有class不可以用这个方式读取,
因为class是js的保留字,相当于HTML用了,但是在JS中不可以使用,JS中HTML被占用了,
方法很简单,换一个元素即可,换成<code>className</code></p>
<p>例如如下代码实现了一个轮播图的效果 <pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
        <span class="token selector">img</span><span class="token punctuation">&#123;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> 50px auto<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./img/imgs1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>next<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>下一张图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>last<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上一张图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> pic<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> lst<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"last"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> nxt<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"next"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> idx<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
    nxt<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        pic<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">"./img/imgs"</span><span class="token operator">+</span><span class="token punctuation">(</span><span class="token operator">++</span>idx<span class="token punctuation">)</span><span class="token operator">%</span><span class="token number">4</span><span class="token operator">+</span><span class="token string">".jpg"</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    lst<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        pic<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">"./img/imgs"</span><span class="token operator">+</span><span class="token punctuation">(</span>idx<span class="token operator">=</span><span class="token punctuation">(</span>idx<span class="token operator">-</span><span class="token number">1</span><span class="token operator">+</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">%</span><span class="token number">4</span><span class="token operator">+</span><span class="token string">".jpg"</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<h2 id="获取元素的子节点">获取元素的子节点</h2>
<ul>
<li><code>Elem.getElementsByTagName()</code>在Elem元素的子节点中搜索</li>
<li><code>Elem.childNodes</code>当前元素的所有子节点</li>
<li><code>Elem.firstChild</code>当前节点的第一个子节点</li>
<li><code>Elem.lastChild</code>当前节点的最后一个子节点</li>
</ul>
<p>注意,childNodes会获取文本节点在内的所有节点,包括文本,例如
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span></code></pre> 如果尝试查询ul的childNodes会发现有9个,1个是:
<code>ul</code>后面的那个回车与空格,4个是:
<code>li</code>后面的那个回车与空格,4个是<code>li</code>标签</p>
<p>确实不当人,你可以删除空白减少数目</p>
<p><strong>注意,IE8及一下不会将空格当成子节点</strong></p>
<p>可以使用children属性,没有兼容性问题</p>
<p>first,lastChild也获取空白</p>
<h2 id="获取父元素与兄弟节点">获取父元素与兄弟节点</h2>
<ul>
<li><p><code>Elem.parentNode</code>获取父元素,是<strong>属性</strong></p></li>
<li><p><code>Elem.previousElementSibling()</code>获取前一个兄弟元素(IE8-
不支持)</p></li>
<li><p><code>Elem.NextElementSibling()</code>获取后一个兄弟元素(IE8-
不支持)</p></li>
<li><p><code>.innerText()</code>
与<code>innerHTML()</code>唯一的不同就是去除了HTML标签</p></li>
<li><p><code>.previousSibling</code>
获取前一个兄弟<strong>节点</strong>,有可能是文本节点</p></li>
<li><p><code>.previousElementSibling</code>
获取前一个兄弟<strong>元素</strong>，一定是元素，<strong>IE8不支持</strong></p></li>
<li><p>获取文本节点的文本内容: 见前表，使用nodeValue</p></li>
<li><p>为了防止重定义： body使用document.body</p></li>
<li><p>为了防止重定义： body使用document.documentElement</p></li>
<li><p><code>document.all</code> 选中所有元素</p></li>
<li><p><code>getElementsByClassName()</code>
获取指定类的元素序列(IE8及以下不支持)</p></li>
<li><p><code>querySelect()</code>
可以根据CSS选择器获取节点(IE7及以下不支持)</p></li>
<li><p><code>querySelectAll()</code>
可以根据CSS选择器获取节点<strong>类数组</strong>(IE7及以下不支持)</p></li>
</ul>
<h2 id="a标签点击点击的默认行为">a标签点击点击的默认行为</h2>
<p>如果写<code>&lt;a&gt;</code>标签的onclick,在点击结束,执行完JS代码后,会执行a的链接地址,会跳转到位置页面,可以在onclick函数写完返回false禁止这种行为</p>
<p>例如,删除自己所在的tr: <pre class="language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> allA <span class="token operator">=</span> doctment<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>allA<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    allA<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      <span class="token keyword">var</span> tr <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span>
      <span class="token comment">//alert("确认删除")</span>
      <span class="token keyword">var</span> tgname <span class="token operator">=</span> tr<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token function">confirme</span><span class="token punctuation">(</span><span class="token string">"确认"</span><span class="token operator">+</span>tgname<span class="token operator">+</span><span class="token string">"删除"</span><span class="token punctuation">)</span>
        <span class="token keyword">var</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>tr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre></p>
<h2 id="table使用的注意事项">table使用的注意事项</h2>
<p>即使你在HTML中没有写tbody,浏览器也会自动加上,所以选择元素的时候注意加上<code>tbody</code>等元素</p>
<h2 id="js中索索引变化的问题">js中索索引变化的问题</h2>
<p>有如下代码</p>
<pre class="language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function">onload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">querySelectAll</span><span class="token punctuation">(</span><span class="token constant">XXX</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>s<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    s<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      <span class="token function">alert</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>之后,我们发现点击s[i]都会输出<code>s.length</code>,这是因为JS虽然语法规则与C++出奇类似,但是是一门<strong>解释型语言</strong>,不妨模拟一下运行流程(假设长度为3)</p>
<pre class="language-none"><code class="language-none">JS解释器读取到&#96;window.onload()&#123;&#96;
JS解释器等待到页面加载完成...
JS解释器定义s,获取s&#96;var s &#x3D; querySelectAll(XXX);&#96;
JS解释器执行for
  i&#x3D;0:
    s[0].onclick&#x3D;function()&#123;
      alert(i);
    &#125;
    &#x2F;&#x2F; 注意此时内部只是一个字符串,这是一个对象,里面的i替换
  i&#x3D;1:
    s[1].onclick&#x3D;function()&#123;
      alert(i);
    &#125;
    &#x2F;&#x2F; 注意此时内部只是一个字符串,这是一个对象,里面的i替换
  i&#x3D;2:
    s[2].onclick&#x3D;function()&#123;
      alert(i);
    &#125;
    &#x2F;&#x2F; 注意此时内部只是一个字符串,这是一个对象,里面的i替换
  i&#x3D;3:
    JS解释器退出循环
JS解释器等待其他操作

JS解释器发现s[1]的按钮被按下
JS执行函数&#96;function()&#123;alert(i);&#125;
JS进入函数,发现i找不到,去更大作用域找,发现在for里面有一个i&#x3D;3
JS输出i&#x3D;3</code></pre>
<p>如果是编译型语言就会在生成的时候直接
替换内部,没有这个问题,我们可以写下以下代码来验证上述过程的正确性</p>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> allA<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> i<span class="token punctuation">;</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>allA<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span>
            allA<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
                <span class="token function">alert</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span>
        i<span class="token operator">+=</span><span class="token number">100</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>任意一个输出103</p>
<p>在实际使用中注意 <pre class="language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function">onload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">querySelectAll</span><span class="token punctuation">(</span><span class="token constant">XXX</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>s<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    s<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token constant">XXX</span><span class="token operator">=</span><span class="token constant">XXX</span><span class="token punctuation">;</span>
      <span class="token operator">...</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
没问题,click里面没有用i,用的是this,可以正常调用 <pre class="language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function">onload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">querySelectAll</span><span class="token punctuation">(</span><span class="token constant">XXX</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>s<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    s<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      s<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token constant">XXX</span><span class="token operator">=</span><span class="token constant">XXX</span><span class="token punctuation">;</span>
      <span class="token operator">...</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
会炸,因为s[i]永远是那个s[s.length]</p>
<h2 id="操作内联样式">操作内联样式</h2>
<p>因为之前的JS都是操作HTML(结构),现在想操作CSS(表现)</p>
<p>可以使用<code>elem.style.样式名=样式值</code></p>
<p><strong>注意,样式值必须加引号,如下</strong></p>
<p>注意,样式名带<code>-</code>的在JS中会认为是减号,不合法,需要去掉<code>-</code>,后一位大写,如下
<pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.box</span><span class="token punctuation">&#123;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> #bfa<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> box<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> btn<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token operator">=</span><span class="token string">"#000"</span><span class="token punctuation">;</span>
            box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width<span class="token operator">=</span><span class="token string">"100px"</span><span class="token punctuation">;</span>
            box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height<span class="token operator">=</span><span class="token string">"100px"</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<p>注意,如果原来样式加入了<code>!import</code>,JS就废了</p>
<p>不加="XXX"的话就可以读取样式了,但是注意,读取的结果都是有单位的字符串,有px,不要随便相加</p>
<p><strong>通过style属性写入与读取的都是内联样式,样式表设置的读取不了!!!</strong></p>
<h2 id="获取元素的其他样式">获取元素的其他样式</h2>
<p>上述的style仅仅可以获取内联样式的值,可以将style换成<code>currentStyle</code>获取<strong>当前正在生效的值</strong>,不是一定是内联还是样式表,还是JS文件</p>
<p>但是有的时候我们不需要这样,例如定义了一个div,宽度默认是auto,那么获取的结果也是auto,并不是实际显示的宽度</p>
<p><strong>currentStyle只有IE支持</strong></p>
<p>在其他浏览器中我们可以使用<code>getComputedStyle()</code>这个<strong>window的方法</strong>来获取样式</p>
<p>字面意可以这个是直接获取了具体的值(浏览器开发者工具那个computed)</p>
<p>IE8及以下不支持</p>
<p>用法为:<code>getComputedStyle(元素,伪元素)</code>,没有伪元素的写null,返回值是元素的CSS属性类,例如</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> box<span class="token operator">=</span>document<span class="token punctuation">.</span>queryS<span class="token operator">...</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> boxStyle<span class="token operator">=</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>box<span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>boxStyle<span class="token punctuation">.</span>width<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>问题在于我们的项目如果需要兼容IE8应该如何处理呢? -
用<code>currentStyle</code>chrome报错 -
用<code>getComputedStyle</code>IE8报错 - 可以自己封装一个函数解决问题
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">getStyle</span><span class="token punctuation">(</span><span class="token parameter">elem<span class="token punctuation">,</span>name</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>getComputedStyle<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> elem<span class="token punctuation">.</span>currentStyle<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre> 也可以写作 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">getStyle</span><span class="token punctuation">(</span><span class="token parameter">elem<span class="token punctuation">,</span>name</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token string">"getComputedStyle"</span> <span class="token keyword">in</span> window<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> elem<span class="token punctuation">.</span>currentStyle<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre> 都可以改成三目运算符</p>
<p>不用<code>if(getComputedStyle in window)</code>是因为<code>in</code>前面应该是变量名,如果不加<code>""</code>会认为是变量值(也就是getComputedStyle的函数定义语句作为变量名)是不会是一个属性值</p>
<p>注意:通过<code>getComputedStyle</code>,<code>getCurrentStyle</code>获取的属性全部是只读的,不可修改</p>
<h2 id="其余的样式方法">其余的样式方法</h2>
<ul>
<li><code>elem.clientHeight</code> 获取元素可见高度的属性 无单位
只读</li>
<li><code>elem.clientWidth</code> 获取元素可见宽度的属性 无单位
只读</li>
</ul>
<p>例如一个div是padding:10px,width=100px,heigh=100px;那么这个可见宽度是120,但是上一节的结果查出来是100px</p>
<ul>
<li><p><code>elem.offsetHeight</code> 获取元素可见高度(包括边框)的属性
无单位 只读</p></li>
<li><p><code>elem.offsetWidth</code> 获取元素可见宽度(包括边框)的属性
无单位 只读</p></li>
<li><p><code>offsetParent</code> 定位父元素:获取最近的包含块</p></li>
<li><p><code>offsetParent</code>
相对于定位父元素左偏移量:获取最近的包含块左偏移量</p></li>
<li><p><code>offsetParent</code>
相对于定位父元素右偏移量:获取最近的包含块右偏移量</p></li>
<li><p><code>scrollWidth</code> 元素在滚动的时候最大宽度</p></li>
<li><p><code>scrollHeight</code> 元素在滚动的时候最大高度</p></li>
<li><p><code>scrollLeft</code> 水平滚动条滚动的距离</p></li>
<li><p><code>scrollTop</code> 垂直滚动条滚动的距离</p></li>
<li><p><strong>注意一个元素如果有滚动条,那么clientHeight会加上滚动条的宽度</strong></p></li>
<li><p><code>onscroll</code>当元素滚动条在被调用</p></li>
<li><p><code>onmousemove</code>当元素<strong>上</strong>有鼠标</p></li>
<li><p><code>event.clientX</code>鼠标在可视区域的左偏移</p></li>
<li><p><code>event.clientY</code>鼠标在可视区域的上偏移</p></li>
<li><p><code>event.pageX</code>鼠标在整个页面的左偏移
IE8及以下不兼容</p></li>
<li><p><code>event.pageY</code>鼠标在整个页面的上偏移
IE8及以下不兼容</p></li>
</ul>
<p>注意,对于全页面的滚动条,chrome认为是body的,但是firefox认为是html的,所以如果想要获取全页面的滚动条可以
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> scr <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token constant">XXX</span> <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token constant">XXX</span></code></pre></p>
<h2 id="事件对象">事件对象</h2>
<p>希望做一个实时显示鼠标坐标的功能</p>
<p><strong>事件</strong>应该是<code>onmousemove</code>,在移动的时候被出发</p>
<ul>
<li>当事件对象被触发的时候,浏览器会对每一个事件进行实参传入,我们可以定义一个随便起个名字接受他,
这个事件会封装事件相关的细节变量,但是IE8不支持,在IE8中浏览器不会传递实参,而是将事件对象作为window的属性保存的,于是我们写下
<pre class="language-js" data-language="js"><code class="language-js">elem<span class="token punctuation">.</span><span class="token function-variable function">onmousemove</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  event<span class="token operator">=</span>event<span class="token operator">||</span>window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>cilentX<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>cilentY<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre></li>
</ul>
<h2 id="事件的冒泡">事件的冒泡</h2>
<p>冒泡指的是事件的向上传导,当后代元素的某个事件被触发,他的祖先元素如果拥有相同的事件那么也将会被触发,子元素优先执行</p>
<p>注意,冒泡对于一般的开发是好的,但是如果想要取消冒泡也很简单,如果原函数没有event就添加event,然后写程序结束的时候写下<code>event.cancelBubble=true</code>着冒泡至此停止,全浏览器支持</p>
<h2 id="事件的委派">事件的委派</h2>
<p>当我们尝试添加一个对象的时候可以直接创建对象,对象的innerHTML设置为HTML代码,这样可以免去创建与连接节点的步骤,但是这样会导致之前的节点失效,解决方法是吧所有对于该节点所有相同的方法全部设置到节点的公共父元素上,这样由于事件的冒泡,后面的子节点事件发生他的公共祖先元素也会被调用,这就叫事件的委派</p>
<p>值得注意的是,如果我们想对指定的某一部分元素进行委派可以为准备委派的元素设定特定的class等标签实现,这里需要用到<code>event.target</code>属性,他的值是事件叶子节点的元素,我们可以通过<code>event.target.class</code>判断是否之指定的元素,如果元素绑定了多个class则需要使用正则</p>
<h2 id="事件的绑定">事件的绑定</h2>
<ul>
<li><p>使用<code>对象.事件=function()&#123;&#125;</code>的方法绑定元素之可以绑定一个事件,如果绑定多个会导致后面的函数覆盖前面的的函数</p></li>
<li><p>使用<code>addEventListener("事件字符串去掉on",回调函数,是否在捕获阶段触发事件一般false)</code>通过这个方法也可以为元素绑定响应函数.
注意,如果事件字符串有on一定要删除,例如 <pre class="language-js" data-language="js"><code class="language-js">box<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token comment">//...</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
本来是要绑定<code>onclick</code>但是现在换成了<code>click</code>,<strong>绑定的事件是先绑定先执行</strong>,函数的this是调用元素</p></li>
<li><p>IE8及以下不支持,IE5-10提供了:<code>.attachEvent()</code>,用法是<code>.attachEvent("事件字符串不能删去on",函数)</code>,不需要第三个参数,有on的事件的on不能删除,<strong>绑定的事件是后绑定先执行</strong>,其中的this是<code>window</code></p></li>
<li><p>要解决兼容性还想需要我们自己抽象函数 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">bind</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span>eventstr<span class="token punctuation">,</span>callback</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span>
    obj<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventstr<span class="token punctuation">,</span>callback<span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span>
    obj<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">"on"</span><span class="token operator">+</span>eventstr<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
      <span class="token comment">// 解决IE this为window的问题</span>
      <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span></code></pre></p></li>
</ul>
<h2 id="事件的传播">事件的传播</h2>
<p>对于事件的传播网景与微软有着不同的理解,微软认为元素的事件应该是由内而外的传播,应该先触发当前元素上的事件,然后传播到祖先元素</p>
<ul>
<li>事件的冒泡:
触发事件的时候应该先触发内部的元素,然后传递到祖先元素</li>
<li>事件的捕获: 触发时间后先触发事件的祖先元素,之后传递到叶子节点</li>
<li>W3C综合了两方观点,将事件分成了单个阶段:
<ul>
<li>捕获阶段:
捕获阶段从最外层祖先元素开始,想目标元素进行捕获,凡是此时默认不触发事件</li>
<li>目标阶段: 捕获的目标元素</li>
<li>冒泡阶段: 事件从祖先目标元素开始传递,依次触发祖先元素</li>
<li></li>
</ul></li>
</ul>
<h2 id="全选问题">全选问题</h2>
<p>有点时候我们想拖动元素,但是如果选中了其他文字会导致文字被移动进入搜索模式,解决方法如下</p>
<ul>
<li>非IE: 拖动函数<code>return false;</code>取消默认操作</li>
<li>IE:
设置全局捕获,此时在任何元素上的对应操作都会被绑定到被设置的元素,甚至在浏览器之外的地方进行操作都会"重定向"到被设置元素,取消捕获可以使用<code>releaseCapture();</code>,chrome不认,写成<code>this.setCapture &amp;&amp; this.setCapture();</code>例子见拖动</li>
</ul>
<h2 id="拖动">拖动</h2>
<p>实现一个鼠标拖动 <pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
        <span class="token selector">html</span> <span class="token punctuation">&#123;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 2000px2<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
        
        <span class="token selector">.box1,
        .box2</span> <span class="token punctuation">&#123;</span>
            <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
            <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
            <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> #bfa<span class="token punctuation">;</span>
            <span class="token property">z-index</span><span class="token punctuation">:</span> 9<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">z-index</span><span class="token punctuation">:</span>999<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> bisque<span class="token punctuation">;</span><span class="token property">left</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">top</span><span class="token punctuation">:</span>200px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> box2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        box<span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            event <span class="token operator">=</span> event <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>setCapture <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setCapture</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> boxstyle <span class="token operator">=</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> offsetX <span class="token operator">=</span> event<span class="token punctuation">.</span>clientX <span class="token operator">-</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>boxstyle<span class="token punctuation">.</span>left<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> offsetY <span class="token operator">=</span> event<span class="token punctuation">.</span>clientY <span class="token operator">-</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>boxstyle<span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> zidx <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>boxstyle<span class="token punctuation">.</span>zIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
            window<span class="token punctuation">.</span><span class="token function-variable function">onmousemove</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
                event <span class="token operator">=</span> event <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
                <span class="token keyword">var</span> <span class="token constant">X</span> <span class="token operator">=</span> event<span class="token punctuation">.</span>clientX<span class="token punctuation">;</span>
                <span class="token keyword">var</span> <span class="token constant">Y</span> <span class="token operator">=</span> event<span class="token punctuation">.</span>clientY<span class="token punctuation">;</span>
                obj<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token constant">X</span> <span class="token operator">-</span> offsetX <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
                obj<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token constant">Y</span> <span class="token operator">-</span> offsetY <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
                obj<span class="token punctuation">.</span>style<span class="token punctuation">.</span>zIndex <span class="token operator">=</span> <span class="token number">2147483647</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
            window<span class="token punctuation">.</span><span class="token function-variable function">onmouseup</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
                obj<span class="token punctuation">.</span>releaseCapture <span class="token operator">&amp;&amp;</span> obj<span class="token punctuation">.</span><span class="token function">releaseCapture</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                event <span class="token operator">=</span> event <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
                obj<span class="token punctuation">.</span>style<span class="token punctuation">.</span>zIndex <span class="token operator">=</span> zidx<span class="token punctuation">;</span>
                window<span class="token punctuation">.</span>onmousemove <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>onmouseup <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// 取消全选</span>
        <span class="token punctuation">&#125;</span>
        box2<span class="token punctuation">.</span>onmousedown <span class="token operator">=</span> box<span class="token punctuation">.</span>onmousedown<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<h2 id="滚轮事件">滚轮事件</h2>
<ul>
<li>chrome,IE的鼠标滚动事件是:<code>onmousewheel</code></li>
<li>火狐是<code>DOMMouseScroll</code>并且不接受直接定义,必须是<code>addEventListerer</code>绑定</li>
</ul>
<p>判断滚动方向需要event</p>
<ul>
<li>对于chrome,IE,使用<code>event.wheelDelta</code>正数是向上,向下是负,数值大小没有意义</li>
<li>对于火狐,使用<code>event.detail</code>负数是向上,正数向下,数值大小没有意义</li>
</ul>
<p>取消默认行为</p>
<p>滚动的时候会冒泡的全局拖动滚动条,所以要关闭</p>
<ul>
<li>chrome与IE: <code>return false;</code></li>
<li>火狐:<code>event.preventDefault()</code></li>
</ul>
<p>例子 <pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.box1</span><span class="token punctuation">&#123;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> #bfa<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> box<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        box<span class="token punctuation">.</span><span class="token function-variable function">onmousewheel</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            event<span class="token operator">=</span>event<span class="token operator">||</span>window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
            <span class="token keyword">var</span> boxstyle <span class="token operator">=</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height<span class="token operator">=</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token function">parseInt</span><span class="token punctuation">(</span>boxstyle<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token operator">+</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>wheelDelta<span class="token operator">/</span>Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>wheelDelta<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token string">"px"</span><span class="token punctuation">;</span>
            event<span class="token punctuation">.</span>preventDefault<span class="token operator">||</span>event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre></p>
<h2 id="键盘事件">键盘事件</h2>
<ul>
<li><code>onkeydown</code> 按键被按下</li>
<li><code>onkeyup</code> 键盘被松开</li>
</ul>
<p>键盘事件一般被绑定给可以获取焦点的对象(光标可以闪的对象),实际上都可以绑定</p>
<p>注意,<code>onkeydown</code>如果按下一个按键不松开会连续触发,但是第一次触发后稍微卡一下,这是浏览器设计的时候为了防止误触</p>
<ul>
<li><p>可以使用<code>.keyCode</code>获取按下的按键的unicode编码</p></li>
<li><p>判<code>Ctrl+W</code>是否被按下:ctrl的ASCII为17,W的unicode为87,但是不能写
<pre class="language-js" data-language="js"><code class="language-js">event<span class="token punctuation">.</span>keyCode<span class="token operator">==</span><span class="token number">17</span><span class="token operator">&amp;&amp;</span>event<span class="token punctuation">.</span>keyCode<span class="token operator">==</span><span class="token number">87</span></code></pre> 这明显是假的,我们可以用特殊的键判断: <pre class="language-js" data-language="js"><code class="language-js">event<span class="token punctuation">.</span>ctrlKey<span class="token operator">&amp;&amp;</span>event<span class="token punctuation">.</span>KeyCode<span class="token operator">==</span><span class="token number">87</span></code></pre>
类似还有<code>altKey</code>,<code>ctrlKey</code>,<code>shiftKey</code>按下返回<code>true</code></p></li>
<li><p>在文本框中输入内容属于文本框的默认行为可以使用<code>return false;</code>禁用显示输入</p></li>
</ul>
<h2 id="bom">BOM</h2>
<p>BOM 浏览器对象模型</p>
<p>BOM可以通过JS操作浏览器,
JS为我们提供了一族对象实现了对浏览器的操作,有</p>
<ul>
<li>window
<ul>
<li>代表整个浏览器的窗口,也是window是全局对象</li>
</ul></li>
<li>navigator
<ul>
<li>代表了当前浏览器的信息,通过这个对象可以识别浏览器</li>
</ul></li>
<li>location
<ul>
<li>代表当前浏览器的地址栏信息</li>
</ul></li>
<li>history
<ul>
<li>代表浏览器的历史记录,可以通过这个对象操作历史记录</li>
<li>由于隐私的原因,不能获取具体的历史记录,只能向前后翻页</li>
<li>该操作只能在当次访问有效</li>
</ul></li>
<li>screen
<ul>
<li>代表用户的屏幕信息,这个对象可以获取显示器的相关信息<br />
</li>
</ul></li>
<li>以上出来window之外的都是window的元素</li>
</ul>
<h2 id="navigator">Navigator</h2>
<ul>
<li><code>appName</code>返回浏览器名称
<ul>
<li>由于历史原因,Navigator大部分属性都不能帮助我们识别浏览器了</li>
<li>这个属性出来IE9及以下显示MS
IE,其他都是网景,一般用一下方式判断浏览器信息</li>
</ul></li>
<li><code>userAgent</code>描述浏览器信息的内容
<ul>
<li><code>chrome</code>:"Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198
Safari/537.36"</li>
<li>...</li>
<li>通过看这个字符串里面有没有firefox,chrome,MSIE(IE10-),什么都没有(IE11)</li>
<li>IE11啥都没有可以用IE特有的属性确定是否存在例如<code>ActiveXObject</code>,但是这个属性被用的太多了,所以微软吧这个属性的bool转化为了false我们可以改为<code>ActiveXObject in window</code></li>
</ul></li>
</ul>
<p>获取元素到底转化为bool的什么了可以使用<code>!!XXX</code></p>
<h2 id="history">history</h2>
<ul>
<li><code>length</code> 历史记录长度</li>
<li><code>back()</code> 回到上一个页面,与浏览器的回退一样</li>
<li><code>forward()</code> 去下一个页面,与浏览器的前进一样</li>
<li><code>go()</code>
使用整数作为操作数,正数表示向前,负数向后,绝对值表示跳转页面数</li>
</ul>
<h2 id="loacation">loacation</h2>
<p>直接打印location就可以获得当前页面的完整路径,如果修改了路径值,浏览器会自动刷新到修改的路径,同时生成历史记录</p>
<ul>
<li>window.location.href 返回当前页面的 href (URL)</li>
<li>window.location.hostname 返回 web 主机的域名</li>
<li>window.location.pathname 返回当前页面的路径或文件名</li>
<li>window.location.protocol 返回使用的 web 协议（http: 或 https:）</li>
<li>window.location.assign 加载新文档和直接修改值一样</li>
<li>window.location.reload() 重新加载文档(保存表单等缓存)</li>
<li>window.location.reload(true) 重新加载文档(强制清空缓存)</li>
<li>window.location.replace() 跳转链接(不保存历史记录)</li>
</ul>
<h2 id="window">window</h2>
<ul>
<li>alert 只有确定的警告框</li>
<li>confirm 有确定和取消的警告框</li>
<li>prompt 可以输入数据的警告框</li>
<li>setInterval(回调函数,时间ms);开启定时器，window的方法，将一个函数每隔一段时间执行一次,
返回number类型的数据，作为定时器的id</li>
<li>clearInterval(n);关闭标识为n的定时器，n为undefined不报错</li>
<li>注意 setInterval
调用多次会调用多个计时器，在开的时候注意要不要清除以前的</li>
<li>setTimeout(function(){},时间ms);定时之后执行一次</li>
</ul>
<h2 id="类的操作">类的操作</h2>
<p>代码与笔记 <pre class="language-html" data-language="html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
      
      <span class="token selector">.b1</span><span class="token punctuation">&#123;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span>
      
      <span class="token selector">.b2</span><span class="token punctuation">&#123;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span>
      
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
      
      window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token comment">//获取box</span>
        <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//获取btn01</span>
        <span class="token keyword">var</span> btn01 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"btn01"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        
        <span class="token comment">//为btn01绑定单击响应函数</span>
        btn01<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          <span class="token comment">//修改box的样式</span>
          <span class="token comment">/*
           * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
           *  这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
           */</span>
          <span class="token comment">/*box.style.width = "200px";
          box.style.height = "200px";
          box.style.backgroundColor = "yellow";*/</span>
          
          <span class="token comment">/*
           * 我希望一行代码，可以同时修改多个样式
           */</span>
          
          <span class="token comment">//修改box的class属性</span>
          <span class="token comment">/*
           * 我们可以通过修改元素的class属性来间接的修改样式
           * 这样一来，我们只需要修改一次，即可同时修改多个样式，
           *  浏览器只需要重新渲染页面一次，性能比较好，
           *  并且这种方式，可以使表现和行为进一步的分离
           */</span>
          <span class="token comment">//box.className += " b2";</span>
          <span class="token comment">//addClass(box,"b2");</span>
          
          <span class="token comment">//alert(hasClass(box,"hello"));</span>
          
          <span class="token comment">//removeClass(box,"b2");</span>
          
          <span class="token function">toggleClass</span><span class="token punctuation">(</span>box<span class="token punctuation">,</span><span class="token string">"b2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
        
      <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
      
      <span class="token comment">//定义一个函数，用来向一个元素中添加指定的class属性值</span>
      <span class="token comment">/*
       * 参数:
       *  obj 要添加class属性的元素
       *  cn 要添加的class值
       *  
       */</span>
      <span class="token keyword">function</span> <span class="token function">addClass</span><span class="token punctuation">(</span><span class="token parameter">obj <span class="token punctuation">,</span> cn</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        
        <span class="token comment">//检查obj中是否含有cn</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">hasClass</span><span class="token punctuation">(</span>obj <span class="token punctuation">,</span> cn<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          obj<span class="token punctuation">.</span>className <span class="token operator">+=</span> <span class="token string">" "</span><span class="token operator">+</span>cn<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
        
      <span class="token punctuation">&#125;</span>
      
      <span class="token comment">/*
       * 判断一个元素中是否含有指定的class属性值
       *  如果有该class，则返回true，没有则返回false
       *  
       */</span>
      <span class="token keyword">function</span> <span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token parameter">obj <span class="token punctuation">,</span> cn</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        
        <span class="token comment">//判断obj中有没有cn class</span>
        <span class="token comment">//创建一个正则表达式</span>
        <span class="token comment">//var reg = /\bb2\b/;</span>
        <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">"\\b"</span><span class="token operator">+</span>cn<span class="token operator">+</span><span class="token string">"\\b"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        
        <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>className<span class="token punctuation">)</span><span class="token punctuation">;</span>
        
      <span class="token punctuation">&#125;</span>
      
      <span class="token comment">/*
       * 删除一个元素中的指定的class属性
       */</span>
      <span class="token keyword">function</span> <span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token parameter">obj <span class="token punctuation">,</span> cn</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token comment">//创建一个正则表达式</span>
        <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">"\\b"</span><span class="token operator">+</span>cn<span class="token operator">+</span><span class="token string">"\\b"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        
        <span class="token comment">//删除class</span>
        obj<span class="token punctuation">.</span>className <span class="token operator">=</span> obj<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg <span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        
      <span class="token punctuation">&#125;</span>
      
      <span class="token comment">/*
       * toggleClass可以用来切换一个类
       *  如果元素中具有该类，则删除
       *  如果元素中没有该类，则添加
       */</span>
      <span class="token keyword">function</span> <span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token parameter">obj <span class="token punctuation">,</span> cn</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        
        <span class="token comment">//判断obj中是否含有cn</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">hasClass</span><span class="token punctuation">(</span>obj <span class="token punctuation">,</span> cn<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
          <span class="token comment">//有，则删除</span>
          <span class="token function">removeClass</span><span class="token punctuation">(</span>obj <span class="token punctuation">,</span> cn<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token keyword">else</span><span class="token punctuation">&#123;</span>
          <span class="token comment">//没有，则添加</span>
          <span class="token function">addClass</span><span class="token punctuation">(</span>obj <span class="token punctuation">,</span> cn<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
        
      <span class="token punctuation">&#125;</span>
      
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn01<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击按钮以后修改box的样式<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b1 b2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre></p>

    </div>

    
    
    
      


    <footer class="post-footer">
          <div class="reward-container">
  <div></div>
  <button>
    赞赏
  </button>
  <div class="post-reward">
      <div>
        <img src="/images/wechatpay.png" alt="Liu Kairui 微信">
        <span>微信</span>
      </div>
      <div>
        <img src="/images/alipay.png" alt="Liu Kairui 支付宝">
        <span>支付宝</span>
      </div>

  </div>
</div>

          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Liu Kairui
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/" title="JavaScript基础版笔记">http://liukairui.me/article/JavaScript基础版笔记/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
              <a href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag"><i class="fa fa-tag"></i> 笔记</a>
              <a href="/tags/JavaScript/" rel="tag"><i class="fa fa-tag"></i> JavaScript</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/article/C%E8%AF%AD%E8%A8%80switch%E7%9A%84%E8%8C%83%E5%9B%B4%E5%88%A4%E6%96%AD%E8%A1%A8%E8%BE%BE%E6%B3%95/" rel="prev" title="C语言switch的范围判断表达法">
                  <i class="fa fa-chevron-left"></i> C语言switch的范围判断表达法
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/article/JavaScript%E8%BF%9B%E9%98%B6%E7%89%88%E7%AC%94%E8%AE%B0/" rel="next" title="JavaScript进阶版笔记">
                  JavaScript进阶版笔记 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments" id="valine-comments"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 2019 – 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Liu Kairui</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>
  <div class="addthis_inline_share_toolbox">
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6231eb6f709fc868" async="async"></script>
  </div><script
  async
  src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
></script>

 
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
  function timer() {
    var ages = moment.preciseDiff(moment(),moment(20201101,"YYYYMMDD"));
    ages = ages.replace(/years?/, "年");
    ages = ages.replace(/months?/, "月");
    ages = ages.replace(/days?/, "天");
    ages = ages.replace(/hours?/, "小时");
    ages = ages.replace(/minutes?/, "分");
    ages = ages.replace(/seconds?/, "秒");
    ages = ages.replace(/\d+/g, '<span class="daysCnt" style="color:#1890ff">$&</span>');
    div.innerHTML = `我已在此等候你 ${ages}`;
    div.className="workDays";
  }
  var div = document.createElement("div");
  //插入到copyright之后
  var copyright = document.querySelector(".copyright");
  document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
  timer();
  setInterval("timer()",1000)
</script>



    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@next-theme/pjax@0.5.0/pjax.min.js" integrity="sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  
<script src="https://cdn.jsdelivr.net/npm/hexo-generator-searchdb@1.4.0/dist/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>


  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":"forest","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js","integrity":"sha256-7wT34TI0pEBeEFoi4z+vhuSddGh6vUTMWdqJ2SDe2jg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>

  <script src="/js/third-party/pace.js"></script>

  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


  <script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"ABKlVtS4cyaWYEwunPyK3sXt-9Nh9j0Va","app_key":"xxGXdTTEGEVifs2TLB35844I","server_url":"https://abklvts4.lc-cn-e1-shared.com","security":false}</script>
  <script src="/js/third-party/statistics/lean-analytics.js"></script>


  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","mhchem":true,"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.min.js"}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.2.0/quicklink.umd.js" integrity="sha256-4kQf9z5ntdQrzsBC3YSHnEz02Z9C1UeW/E9OgnvlzSY=" crossorigin="anonymous"></script>
  <script class="next-config" data-name="quicklink" type="application/json">{"enable":true,"home":false,"archive":false,"delay":true,"timeout":3000,"priority":true,"url":"http://liukairui.me/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/"}</script>
  <script src="/js/third-party/quicklink.js"></script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

<script>
var options = {
  bottom: '64px',
  right: 'unset',
  left: '32px',
  time: '0.5s',
  mixColor: 'transparent',
  backgroundColor: 'transparent',
  buttonColorDark: '#100f2c',
  buttonColorLight: '#fff',
  saveInCookies: true,
  label: '🌓',
  autoMatchOsTheme: true
}
const darkmode = new Darkmode(options);
window.darkmode = darkmode;
darkmode.showWidget();
</script>


<script class="next-config" data-name="valine" type="application/json">{"enable":true,"appId":"ABKlVtS4cyaWYEwunPyK3sXt-9Nh9j0Va","appKey":"xxGXdTTEGEVifs2TLB35844I","serverURLs":"https://abklvts4.lc-cn-e1-shared.com","placeholder":"请开始你的表演","avatar":"identicon","meta":["nick","mail","link"],"pageSize":10,"lang":"zh-CN","visitor":false,"comment_count":true,"recordIP":true,"enableQQ":true,"requiredFields":[],"el":"#valine-comments","path":"/article/JavaScript%E5%9F%BA%E7%A1%80%E7%89%88%E7%AC%94%E8%AE%B0/"}</script>
<script>
document.addEventListener('page:loaded', () => {
  NexT.utils.loadComments(CONFIG.valine.el)
    .then(() => NexT.utils.getScript(
      'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
      { condition: window.Valine }
    ))
    .then(() => {
      new Valine(CONFIG.valine);
    });
});
</script>


  <script async src="/js/fireworks.js"></script>




  <script src="/js/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = true;
    POWERMODE.shake = false;
    document.body.addEventListener('input', POWERMODE);
  </script>




  <script src="/js/wobblewindow.js"></script>
  <script>
    //只在桌面版网页启用特效 记得同步到header.njk
    if( window.innerWidth > 768  ){
      $(document).ready(function () {
        
          $('body>main>header').wobbleWindow({
            radius: 50,
            movementTop: false,
            movementLeft: false,
            movementRight: false,
            debug: false,
          });
        

        //
        //  $('body header>aside').wobbleWindow({
        //    radius: 50,
        //    movementLeft: false,
        //    movementTop: false,
        //    movementBottom: false,
        //    position: 'fixed',
        //    debug: false,
        //  });
        //

        
          $('body>footer').wobbleWindow({
            radius: 50,
            movementBottom: false,
            movementLeft: false,
            movementRight: false,
            debug: false,
          });
        
      });
    }
  </script>


 
<script>
  $(document).ready(function(){
    var beian = document.querySelector(".footer-inner > .beian > a");
    var cpr=document.querySelector(".footer-inner > .copyright");
    var cnz=document.querySelector(".workDays");//.parentNode;
    var bsz=document.querySelector(".busuanzi-count");
    if(cnz!=null&&bsz!=null)
      cnz.parentNode.insertBefore(bsz,cnz);
    if(bsz == null || bsz == undefined || document.querySelector("#busuanzi_value_site_pv").innerText=="" || document.querySelector("#busuanzi_value_site_uv").innerText == "")
      bsz.remove();
    checkIndex();
    if(beian){cpr.classList.add('split-line');cpr.appendChild(beian);}
  })
  $(document).on('pjax:complete',checkIndex);
</script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"react":{"opacity":0.7}});</script></body>
</html>
